components
List Option
v.1.0.0 | Saturn
StorybookThis component presents a list of options for users to choose from.
import { ListOptions } from '@kubit-ui-web/react-components'
123456
<ListOptions
variant='DEFAULT'
optionVariant='INPUT_OPTION'
selectedValue={2}
options={[{label: 'Label 1', value: 1}, {label: 'Label 2', value: 2}, {label: 'Label 3', value: 3}]}
/>Variant
In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.
We have defined a set of styles for quick use. Access them through the variant prop.
123456
<ListOptions
variant='DEFAULT'
optionVariant='INPUT_OPTION'
selectedValue={2}
options={[{label: 'Label 1', value: 1}, {label: 'Label 2', value: 2}, {label: 'Label 3', value: 3}]}
/>Options
The list of options displayed inside the component can be added through the options property. Additionally, the optionVariant must be set to specify the variant of the options.
123456
<ListOptions
variant='DEFAULT'
optionVariant='INPUT_OPTION'
selectedValue={2}
options={[{label: 'Label 1', value: 1}, {label: 'Label 2', value: 2}, {label: 'Label 3', value: 3}]}
/>Multiselect
Set this property to enable users to select multiple options from the provided list of choices.
1234567
<ListOptions
variant='DEFAULT'
optionVariant='INPUT_OPTION'
multiSelect={true}
selectedValue={[1, 3]}
options={[{label: 'Label 1', value: 1}, {label: 'Label 2', value: 2}, {label: 'Label 3', value: 3}]}
/>