Form
Select
Storybook
Select
The component Select that renders a dropdown menu. The dropdown menu has several variants
Import
1import { Select } from 'dd360-ds'1import Select from 'dd360-ds/Select'Usage
To customize the options we must pass it an object in the prop optionsList with the structure of the example.
1import { Select } from 'dd360-ds'
2
3<Select optionsList={{ A: {label: 'Select option', disabled: true}, B: { label: 'Option B' }, C: { label: 'Option C' } }} />Variants
Select has the following variants: "default", "active", "success", "warning", "error" and "disabled". By default it uses "default".
1import { Select } from 'dd360-ds'
2
3<Select variant='default' optionsList={{ A: {label: 'Select option', disabled: true}, B: { label: 'Option B' }, C: { label: 'Option C' } }} />
4<Select variant='active' optionsList={{ A: {label: 'Select option', disabled: true}, B: { label: 'Option B' }, C: { label: 'Option C' } }} />
5<Select variant='success' optionsList={{ A: {label: 'Select option', disabled: true}, B: { label: 'Option B' }, C: { label: 'Option C' } }} />
6<Select variant='success' optionsList={{ A: {label: 'Select option', disabled: true}, B: { label: 'Option B' }, C: { label: 'Option C' } }} />
7<Select variant='error' optionsList={{ A: {label: 'Select option', disabled: true}, B: { label: 'Option B' }, C: { label: 'Option C' } }} />
8<Select variant='disabled' optionsList={{ A: {label: 'Select option', disabled: true}, B: { label: 'Option B' }, C: { label: 'Option C' } }} />
9Label
The label prop is used to add a label to the Select component. When the prop is provided, the label will appear above the dropdown menu.
1import { Select } from 'dd360-ds'
2
3<Select
4 label='I am a label'
5 optionsList={{ A: {label: 'Select option', disabled: true}, B: { label: 'Option B' }, C: { label: 'Option C' } }}
6/>
7noBorders
The noBorders prop is used to remove the border styling of the Select component. When the prop is provided, the component will appear without borders.
1import { Select } from 'dd360-ds'
2
3<Select
4 noBorders
5 optionsList={{ A: {label: 'Select option', disabled: true}, B: { label: 'Option B' }, C: { label: 'Option C' } }}
6/>
7Select With Icon
Use Select with an icon.
1import { Select } from 'dd360-ds'
2import DynamicHeroIcon from 'dd360-ds/DynamicHeroIcon'
3
4<Select
5 startAdornment={<DynamicHeroIcon icon='AcademicCapIcon' className='text-blue-700 w-6' />}
6 optionsList={{ A: {label: 'Select option', disabled: true}, B: { label: 'Option B' }, C: { label: 'Option C' } }}
7/>
8isRequired
With the prop isRequired you can mark an select as required. Setting isRequired to true will add an asterisk (*) next to the entry to indicate that its completion is required. This functionality is especially useful for highlighting the need to fill in certain fields on forms or user interfaces.
1import { Select } from 'dd360-ds'
2
3<Select optionsList={{ A: {label: 'First Option'} }} isRequired label='This field is required' />
4Select type
With the prop selectType you can change the type of select. The default value is "primary".
1import { Select } from 'dd360-ds'
2
3<Select optionsList={{ A: {label: 'First Option'} }} selectType='primary' />
4<Select optionsList={{ A: {label: 'First Option'} }} selectType='secondary' />
5API Reference
| Name | Types | Default |
|---|---|---|
| "selectType" | primary secondary | primary |
| "optionsList"* | ISelectOptions | - |
| "variant" | default active success warning error disabled | outlined |
| "onChange" | function | - |
| "onFocus" | function | - |
| "onBlur" | function | - |
| "startAdornment" | ReactNode | - |
| "classNameAdornment" | string | - |
| "fontSize" | sm base lg xl 2xl 3xl 4xl xs | outlined |
| "fontWeight" | medium light normal semibold bold | outlined |
| "itemWidth" | 0 | full |
| "message" | string | - |
| "noBorders" | boolean | false |
| "rounded" | none sm base md lg xl 2xl 3xl full | none |
| "label" | string | - |
| "paddingX" | string | - |
| "paddingY" | string | - |
| "padding" | string | 3 |
| "isRequired" | boolean | - |