Checkbox- A checkbox component.CheckboxGroup- Group wrapper for composing multiple checkboxes.
import { Checkbox, CheckboxGroup } from "@dreamy-ui/react";Default
<Checkbox>
Default
</Checkbox>Change the color scheme of the checkbox.
Primary
Secondary
Success
Warning
Error
Info
None
<Checkbox scheme={"primary"} defaultChecked>Primary</Checkbox>
<Checkbox scheme={"secondary"} defaultChecked>Secondary</Checkbox>
<Checkbox scheme={"success"} defaultChecked>Success</Checkbox>
<Checkbox scheme={"warning"} defaultChecked>Warning</Checkbox>
<Checkbox scheme={"error"} defaultChecked>Error</Checkbox>
<Checkbox scheme={"info"} defaultChecked>Info</Checkbox>
<Checkbox scheme={"none"} defaultChecked>None</Checkbox>Change the appearance variant of the checkbox.
Outline
Solid
<Checkbox variant={"outline"}>Outline</Checkbox>
<Checkbox variant={"solid"}>Solid</Checkbox>Change the checkbox size.
Small
Medium
Large
<Checkbox size={"sm"}>Small</Checkbox>
<Checkbox size={"md"}>Medium</Checkbox>
<Checkbox size={"lg"}>Large</Checkbox>Use isChecked and onChange, onChangeValue to control the checkbox.
Selected: false
Controlled
export function ControlledCheckbox() {
const [isChecked, setIsChecked] = useState(false);
return (
<>
<Text>Selected: {isChecked ? "true" : "false"}</Text>
<Checkbox
isChecked={isChecked}
onChangeValue={setIsChecked}
>
Controlled
</Checkbox>
</>
);
}Use CheckboxGroup to compose multiple checkboxes. Use value and onChange in <CheckboxGroup /> to control the selected checkboxes. CheckboxGroup also accepts all the variant props of the Checkbox component.
Every Checkbox in the CheckboxGroup should have a unique value prop.
Selected: 1
Option 1
Option 2
Option 3
function CheckboxGroupControl() {
const [value, setValue] = useState<Array<string | number>>(["1"]);
return (
<>
<Text>Selected: {value.join(", ")}</Text>
<CheckboxGroup
value={value}
onChange={setValue}
>
<Checkbox value="1">Option 1</Checkbox>
<Checkbox value="2">Option 2</Checkbox>
<Checkbox value="3">Option 3</Checkbox>
</CheckboxGroup>
</>
);
}