Switch

v1.1.0

bash

npm install @hua-labs/hua

tsx

import { Switch } from "@hua-labs/hua";


`variant`	`"default" \| "outline" \| "filled" \| "glass"`	`"default"`	Visual style variant
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Switch size
`label`	`string`	-	Label text displayed next to switch
`description`	`string`	-	Additional description below label
`error`	`boolean`	`false`	Error state indicator
`success`	`boolean`	`false`	Success state indicator
`checked`	`boolean`	-	Controlled checked state
`defaultChecked`	`boolean`	-	Initial checked state (uncontrolled)
`disabled`	`boolean`	`false`	Disables the switch

docs:common.basicUsage

import { Switch } from '@hua-labs/hua';

<Switch label="Enable notifications" />

With Description

<Switch
  label="Auto Save"
  description="Automatically save your work"
/>

Controlled

const [enabled, setEnabled] = useState(false);

<Switch
  checked={enabled}
  onChange={(e) => setEnabled(e.target.checked)}
  label="Dark Mode"
/>