Switch

The Switch component provides you with toggle switches.

Import

import { Switch } from '@nostromo/ui-core'
// or
import { Switch } from '@nostromo/ui-core/switch'

Usage

import { Switch, Label } from '@nostromo/ui-core'
 
export default function Example() {
  const [enabled, setEnabled] = React.useState(false)
  
  return (
    <div className="flex items-center space-x-2">
      <Switch 
        id="notifications"
        checked={enabled}
        onCheckedChange={setEnabled}
      />
      <Label htmlFor="notifications">Enable notifications</Label>
    </div>
  )
}

Live Examples

Live Example

☀️

Copy

Storybook →

View Code

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> ...

With Label

Live Example

☀️

Copy

Storybook →

View Code

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">...

Props

Prop	Type	Default	Required	Description
`checked`	`boolean`	`false`	No	Whether the switch is on (controlled)
`defaultChecked`	`boolean`	`false`	No	Default checked state (uncontrolled)
`onCheckedChange`	`(checked: boolean) => void`	`undefined`	No	Callback when checked state changes
`disabled`	`boolean`	`false`	No	Whether the switch is disabled
`required`	`boolean`	`false`	No	Whether the switch is required
`error`	`boolean`	`false`	No	Whether the switch is in an error state
`label`	`string`	`undefined`	No	Label text (alternative to Label component)
`helperText`	`string`	`undefined`	No	Helper text displayed below switch
`id`	`string`	`undefined`	No	Switch ID (auto-generated if not provided)
`name`	`string`	`undefined`	No	Name for form submission
`value`	`string`	`undefined`	No	Value for form submission
`className`	`string`	`undefined`	No	Additional CSS classes
`asChild`	`boolean`	`false`	No	Render as child element

Standard HTML Props

The Switch component extends standard HTML button attributes, including:

aria-* attributes for accessibility
data-* attributes for custom data

RadioGroup Select