Switch- A Switch component.
import { Switch } from "@dreamy-ui/react";Default
<Switch>
Default
</Switch>Change the color scheme of the Switch.
Primary
Secondary
Success
Warning
Error
Info
None
<Switch scheme="primary" defaultChecked>Primary</Switch>
<Switch scheme="secondary" defaultChecked>Secondary</Switch>
<Switch scheme="success" defaultChecked>Success</Switch>
<Switch scheme="warning" defaultChecked>Warning</Switch>
<Switch scheme="error" defaultChecked>Error</Switch>
<Switch scheme="info" defaultChecked>Info</Switch>
<Switch scheme="none" defaultChecked>None</Switch>Change the Switch size.
Sm
Md
Lg
<Switch size="sm">Sm</Switch>
<Switch size="md">Md</Switch>
<Switch size="lg">Lg</Switch>Use isChecked and onChange, onChangeValue to control the checkbox.
Selected: false
Controlled
export function ControlledSwitch() {
const [isChecked, setIsChecked] = useState(false);
return (
<>
<Text>Selected: {isChecked ? "true" : "false"}</Text>
<Switch
isChecked={isChecked}
onChangeValue={setIsChecked}
>
Controlled
</Switch>
</>
);
}