Form
Single Select
Storybook
Single Select
Storybook
The SingleSelect component allows you to create a modern and functional option selector, ideal for forms and web applications that require option selection.
Imports
The first alternative is recommended as it can reduce the application bundle
1import SingleSelect from 'dd360-ds/SingleSelect'1import { SingleSelect } from 'dd360-ds'Usage
The SingleSelect component requires at least the optionsList property that defines the available options for selection.
The following code shows how to use the SingleSelect component:
1import { SingleSelect } from 'dd360-ds'
2
3<SingleSelect
4 optionsList={[
5 { value: '1', label: 'Option 1' },
6 { value: '2', label: 'Option 2' },
7 { value: '3', label: 'Option 3' }
8 ]}
9/>
10Label
The label property allows you to add a descriptive label to the selector.
1import { SingleSelect } from 'dd360-ds'
2
3<SingleSelect
4 label="Select an option"
5 optionsList={[
6 { value: '1', label: 'Option 1' },
7 { value: '2', label: 'Option 2' },
8 { value: '3', label: 'Option 3' }
9 ]}
10/>
11Large
The large property allows you to increase the size of the selector.
1import { SingleSelect } from 'dd360-ds'
2
3<SingleSelect
4 large
5 optionsList={[
6 { value: '1', label: 'Option 1' },
7 { value: '2', label: 'Option 2' },
8 { value: '3', label: 'Option 3' }
9 ]}
10/>
11Disabled
The isDisabled property allows you to disable the selector.
1import { SingleSelect } from 'dd360-ds'
2
3<SingleSelect
4 isDisabled
5 optionsList={[
6 { value: '1', label: 'Option 1' },
7 { value: '2', label: 'Option 2' },
8 { value: '3', label: 'Option 3' }
9 ]}
10/>
11API Reference
| Name | Types | Default |
|---|---|---|
| "optionsList"* | ISelectOption[] | - |
| "label" | string | - |
| "value" | string | number | - |
| "large" | boolean | |
| "isDisabled" | boolean | |
| "isRequired" | boolean | |
| "className" | string | - |
| "classNameAdornment" | string | - |
| "classNameDropdown" | string | - |
| "styleDropdown" | StyleObject | - |
| "onChangeSelect" | (option: ISelectOption) => void | - |
Note: This documentation assumes that the user has basic knowledge of React and how to use components in React applications.