mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 18:31:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(checkbox): improve docs

Browse source
This commit is contained in:
Eric Liu 2025-04-20 15:05:01 -07:00
commit 0e891c2d7e
1 changed files with 21 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

26
docs/src/pages/components/Checkbox.svx
View file

@ -3,39 +3,53 @@
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
## Default (unchecked) Checkboxes let users select one or more options from a list. Use them for multiple-choice questions, settings, or to confirm actions.
## Default
Create a checkbox with a label using `labelText`.
By default, the checkbox is unchecked.
<Checkbox labelText="Label text" /> <Checkbox labelText="Label text" />
## Checked ## Checked
Set `checked` to `true` to pre-select the checkbox.
<Checkbox labelText="Label text" checked /> <Checkbox labelText="Label text" checked />
## Indeterminate ## Indeterminate
Set `indeterminate` to `true` to show a mixed state, typically used in parent checkboxes with some children selected.
<Checkbox labelText="Label text" indeterminate /> <Checkbox labelText="Label text" indeterminate />
## Hidden label ## Hidden label
Set `hideLabel` to `true` to visually hide the label while keeping it accessible to screen readers.
<Checkbox labelText="Label text" hideLabel /> <Checkbox labelText="Label text" hideLabel />
## Disabled ## Disabled state
Set `disabled` to `true` to prevent user interaction.
<Checkbox labelText="Label text" disabled /> <Checkbox labelText="Label text" disabled />
## Reactive example (bind:checked) ## Reactive example (bind:checked)
The `checked` prop supports two-way binding. Use two-way binding with `bind:checked` to track the checkbox state.
<FileSource src="/framed/Checkbox/CheckboxReactive" /> <FileSource src="/framed/Checkbox/CheckboxReactive" />
## Reactive example (bind:group) ## Reactive example (bind:group)
An alternative to `checked` is binding an array of values using `group`. This API in inspired by Svelte [group inputs](https://svelte.dev/tutorial/group-inputs). Bind an array of values using `group` to manage multiple checkboxes. This API is inspired by Svelte [group inputs](https://svelte.dev/tutorial/group-inputs).
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton> <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
<div class="body-short-01"> <div class="body-short-01">
If using <strong>bind:group</strong>, <strong>bind:checked</strong> will only support one-way binding. When using <strong>bind:group</strong>, <strong>bind:checked</strong> only supports one-way binding.
</div> </div>
</InlineNotification> </InlineNotification>
@ -43,4 +57,6 @@ An alternative to `checked` is binding an array of values using `group`. This AP
## Skeleton ## Skeleton
Set `skeleton` to `true` to show a loading state.
<Checkbox skeleton /> <Checkbox skeleton />