Checkbox

PreviousNext

Boolean checkbox with optional label and helper text.

import { Checkbox } from "@/rl-ui";

<Checkbox label="Subscribe" defaultChecked />

Examples

States

import { Checkbox } from "@/rl-ui";

<>
<Checkbox label="Unchecked" />
<Checkbox label="Checked" defaultChecked />
<Checkbox label="Indeterminate" indeterminate />
<Checkbox label="Disabled" disabled />
<Checkbox label="Disabled checked" disabled defaultChecked />
</>

Colors

import { Checkbox } from "@/rl-ui";

<>
<Checkbox color="blue" label="Blue" defaultChecked />
<Checkbox color="black" label="Black" defaultChecked />
</>

Helper text

import { Checkbox } from "@/rl-ui";

<Checkbox label="Accept terms" helperTextType="error" helperText="Required to continue" />

API

PropTypeDefaultDescription
color"blue" | "black""blue"Checked fill color.
labelReactNode—Adjacent label.
helperTextstring—Supporting text under the label.
helperTextType"error" | "warning" | "info""info"Helper tone.
indeterminatebooleanfalseMixed / partial selection.
checkedboolean | "indeterminate"—Controlled checked state.
defaultCheckedboolean—Uncontrolled initial state.
disabledbooleanfalsePrevents interaction.
readOnlybooleanfalseDisplays value without edits.