Switch
A toggle control that allows users to switch between two states. Perfect for enabling/disabling features, toggling settings, and binary choices with smooth animations and full keyboard accessibility.
Import
import { Switch } from "@sparrowengg/twigs-react";Usage
const SwitchExample = () => {
const [enabled, setEnabled] = useState(false);
return (
<Flex css={{ alignItems: "center", gap: "$4" }}>
<Switch
checked={enabled}
onChange={setEnabled}
size="md"
/>
<Text>Enable notifications</Text>
</Flex>
);
};Props
Switch
| Prop | Type | Default |
|---|---|---|
checked? | boolean | - |
defaultChecked? | boolean | - |
onChange? | (checked: boolean) => void | - |
disabled? | boolean | false |
required? | boolean | false |
size? | 'sm' | 'md' | 'sm' |
css? | object | - |
Data Attributes
These props are used for the conditional rendering of the components
Applicable - Switch, SwitchThumb
| Prop | Type | Default |
|---|---|---|
[data-state]? | 'checked' | 'unchecked' | - |
[data-disabled]? | boolean | - |
Slider
A powerful input component for selecting values within a specified range. Perfect for volume controls, form inputs, and interactive value selection with support for single values, ranges, custom styling, and comprehensive accessibility features.
Textarea
A versatile multi-line text input component for longer content. Perfect for comments, descriptions, feedback, and any scenario requiring extended text input.