labelstringchecked?booleandefaultChecked?neverinvalid?booleanfalseitemValue?stringonChange?(checked: boolean, event: ChangeEvent<HTMLInputElement>) => voidFrameworks
Frameworks
aria-labelledbystringnamestringchildren?ReactNodedefaultValue?neverinvalid?booleanfalseonChange?(value: string[]) => voidref?ref?Ref<HTMLInputElement>| Prop | Type | Default |
|---|---|---|
label | string | - |
checked? | boolean | - |
defaultChecked? | never | - |
invalid? | boolean | false |
itemValue? | string | - |
onChange? | (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void | - |
ref? | Ref<HTMLInputElement> | - |
Ref<HTMLFieldSetElement>value?string[]| Prop | Type | Default |
|---|---|---|
aria-labelledby | string | - |
name | string | - |
children? | ReactNode | - |
defaultValue? | never | - |
invalid? | boolean | false |
onChange? | (value: string[]) => void | - |
ref? | Ref<HTMLFieldSetElement> | - |
value? | string[] | - |
import { Checkbox } from '@k8ordo/ui';<Checkbox label="I agree to the terms" /><Checkbox defaultChecked label="Checked by default" />const [checked, setChecked] = useState(false);
<Checkbox
checked={checked}
label="Controlled checkbox"
onChange={(checked) => setChecked(checked)}
/><Checkbox disabled label="Unchecked disabled" />
<Checkbox defaultChecked disabled label="Checked disabled" /><p id="checkbox-group-label">Frameworks</p>
<CheckboxGroup.Root
aria-labelledby="checkbox-group-label"
name="frameworks"
onChange={setValue}
value={value}
>
<Checkbox itemValue="react" label="React" />
<Checkbox itemValue="vue" label="Vue" />
<Checkbox itemValue="svelte" label="Svelte" />
</CheckboxGroup.Root><p id="checkbox-group-disabled-label">Frameworks</p>
<CheckboxGroup.Root
aria-labelledby="checkbox-group-disabled-label"
defaultValue={['vue']}
disabled
name="frameworks-disabled"
>
<Checkbox itemValue="react" label="React" />
<Checkbox itemValue="vue" label="Vue" />
<Checkbox itemValue="svelte" label="Svelte" />
</CheckboxGroup.Root>