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