Biofarma | Bind UI

Switch

A switch control contains a knob that slides along a track. All parts are required to make a switch.

Label

import { Switch } from 'bio-bind-ui';

<Switch
  label='Label'
  labelPosition='right'
  mode='light'
  onChange={() => {}}
  size='md'
  variant='primary'
/>

For set label position left or right

Label

For set variant color primary or secondary

Label

For change light & dark mode

Label

Props	Required	Default	Type	description
variant	false	`primary`	`primary` `secondary`	Select variant primary or secondary.
mode	false	`light`	`light` `dark`	Change mode light or dark.
label	false	`label`	`string`	Change label name.
labelPosition	false	`right`	`left` `right`	Set label position left or right.
isError	false	`false`	`boolean`	Change error state.
size	false	`md`	`sm` `md` `lg`	Change size.
disabled	false	`false`	`boolean`	Change disable state.
onChange	true	-	`event: React.ChangeEvent<HTMLInputElement`	Callback function to run when the switch is changed.
checked	true	`false`	`boolean`	Change checked state.
id	true	-	`string`	A unique identifier for the switch.