components
Toggle
v.1.0.0 | Saturn
StorybookSwitch the state of a single item on/off.
<Toggle variant='DEFAULT'/>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 set this predefined style for its quick use, access them through the variant prop.
<Toggle variant='DEFAULT' />Three options
Use the prop hasThreePositions for a three option toggle.
<Toggle variant='DEFAULT' hasThreePositions={true} />Controlled
The toggle can be used as a controlled component by setting the togglePosition prop.
<Toggle variant='DEFAULT' togglePosition='RIGHT' />Disabled
This state communicate that the user cannot interactuate with the toggle .
<Toggle variant='DEFAULT' disabled={true} />Setting initial position
The initial toggle position can be set using the defaultTogglePosition prop. The allowed values are: RIGHT, CENTER and LEFT.
<Toggle variant='DEFAULT' defaultTogglePosition='RIGHT' />Input values
Default radio input values can be set using the inputValues prop.
<Toggle
variant='DEFAULT'
inputValues={{ leftInputValue: 'off', rightInputValue: 'on' }}
/>Icons
The toggle component can be customized with icons using the onIcon and offIcon props.
<Toggle
variant='DEFAULT'
onIcon={{ icon: 'ICON_GHOST' }}
offIcon={{ icon: 'ICON_PLACEHOLDER' }}
/>