Switch

The Switch component provides you with toggle switches and checkboxes.

Live Examples

Storybook: components-switch--default

Storybook: components-switch--checked

Storybook: components-switch--form-example

Code Examples

import { Switch } from '@nostromo/ui-core'
 
export default function SwitchExample() {
  return (
    <div className="space-y-4">
      <div className="flex items-center space-x-2">
        <Switch id="notifications" />
        <label htmlFor="notifications">Notifications</label>
      </div>
      
      <div className="flex items-center space-x-2">
        <Switch id="dark-mode" />
        <label htmlFor="dark-mode">Dark mode</label>
      </div>
    </div>
  )
}

With Label

import { Switch, Label } from '@nostromo/ui-core'
 
export default function SwitchWithLabel() {
  return (
    <div className="space-y-4">
      <div className="flex items-center space-x-2">
        <Switch id="option1" />
        <Label htmlFor="option1">Option 1</Label>
      </div>
      <div className="flex items-center space-x-2">
        <Switch id="option2" />
        <Label htmlFor="option2">Option 2</Label>
      </div>
    </div>
  )
}

Props

Prop	Type	Default	Description
`checked`	`boolean`	`false`	Whether switch is on
`disabled`	`boolean`	`false`	Whether switch is disabled
`onCheckedChange`	`function`	-	Change handler

RadioGroup Select