ElyriCheckbox
A checkbox that keeps the native input for keyboard and form behaviour while drawing its own checkmark.
Installation
Add component
pnpm dlx @elyri/cli@latest add checkboxExamples
Basic
children render as the label text; click it to toggle.
import { Checkbox } from './components/elyri/Checkbox';
export function Example() {
return (
<div>
<Checkbox defaultChecked>记住我</Checkbox>
<Checkbox>接收产品动态</Checkbox>
</div>
);
}Controlled
Driven by checked and onCheckedChange; the external state is the source of truth.
import { useState } from 'react';
import { Checkbox } from './components/elyri/Checkbox';
export function Example() {
const [checked, setChecked] = useState(false);
return <Checkbox checked={checked} onCheckedChange={setChecked}>订阅周报</Checkbox>;
}Indeterminate
Common for "select all"; sets aria-checked="mixed".
import { Checkbox } from './components/elyri/Checkbox';
export function Example() {
return <Checkbox indeterminate>全部项目</Checkbox>;
}Grouped
CheckboxGroup owns the multi-select value through value / onValueChange.
import { useState } from 'react';
import { CheckboxGroup } from './components/elyri/Checkbox';
export function Example() {
const [value, setValue] = useState(['email', 'sms']);
return (
<CheckboxGroup value={value} onValueChange={setValue}>
<CheckboxGroup.Checkbox value="email">邮件</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="sms">短信</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="push">推送</CheckboxGroup.Checkbox>
</CheckboxGroup>
);
}Vertical layout
Pass orientation="vertical" to stack the options; horizontal is the default.
import { CheckboxGroup } from './components/elyri/Checkbox';
export function Example() {
return (
<CheckboxGroup orientation="vertical" defaultValue={['apple']}>
<CheckboxGroup.Checkbox value="apple">Apple</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="banana">Banana</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox value="cherry">Cherry</CheckboxGroup.Checkbox>
</CheckboxGroup>
);
}Disabled
Both the checked and unchecked disabled states.
import { Checkbox } from './components/elyri/Checkbox';
export function Example() {
return (
<div>
<Checkbox disabled defaultChecked>已选且禁用</Checkbox>
<Checkbox disabled>未选且禁用</Checkbox>
</div>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | — | Controlled value; omit it to run uncontrolled |
defaultChecked | boolean | false | Initial value when uncontrolled, default false |
onCheckedChange | (checked: boolean) => void | — | Called on every change, controlled or not |
indeterminate | boolean | false | Indeterminate state: dash glyph plus aria-checked="mixed" |
children | ReactNode | — | Label text, rendered to the right of the box |
value | string | — | The option value; determines the checked state inside a CheckboxGroup |
size | 'sm' | 'md' | 'md' | Control size: sm / md |
...rest | InputHTMLAttributes | — | Remaining props are forwarded to the native input |
CheckboxGroup.value | string[] | — | Controlled selection set (CheckboxGroup) |
CheckboxGroup.defaultValue | string[] | — | Initial selection when uncontrolled (CheckboxGroup) |
CheckboxGroup.onValueChange | (value: string[]) => void | — | Called whenever the selection set changes (CheckboxGroup) |
CheckboxGroup.orientation | 'horizontal' | 'vertical' | 'horizontal' | Layout direction, horizontal by default (CheckboxGroup) |
CheckboxGroup.disabled | boolean | false | Disable every option from the group (CheckboxGroup) |