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

docs(radio-tile): improve docs

Browse source
This commit is contained in:
Eric Liu 2025-05-03 10:37:30 -07:00
commit 42d6347dce
1 changed files with 11 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

12
docs/src/pages/components/RadioTile.svx
View file

@ -7,8 +7,12 @@ components: ["TileGroup", "RadioTile"]
import Preview from "../../components/Preview.svelte";
</script>
`RadioTile` provides a selectable tile interface for choosing a single option from a set. It supports both individual and grouped usage, with options for light and disabled states.
## Default
Create a group of radio tiles with a shared name and legend.
<TileGroup legend="Service pricing tiers" name="plan" selected="standard">
<RadioTile value="lite">
Lite plan
@ -23,16 +27,20 @@ components: ["TileGroup", "RadioTile"]
## Reactive (one-way binding)
Update the selected value using the `select` event.
<FileSource src="/framed/RadioTile/RadioTileReactiveOneWay" />
## Reactive (two-way binding)
Binding to the `selected` prop is a more concise approach to managing state.
Bind to the `selected` prop for simpler state management.
<FileSource src="/framed/RadioTile/RadioTileReactive" />
## Light variant
Use the light variant for light backgrounds.
<TileGroup legend="Service pricing tiers" name="plan-light" selected="standard">
<RadioTile light value="lite">
Lite plan
@ -47,6 +55,8 @@ Binding to the `selected` prop is a more concise approach to managing state.
## Disabled state
Disable specific tiles to prevent selection.
<TileGroup legend="Service pricing tiers" name="plan-disabled" selected="standard">
<RadioTile value="lite" disabled>
Lite plan