mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 02:41:05 +00:00
60 lines
No EOL
1.3 KiB
Text
60 lines
No EOL
1.3 KiB
Text
---
|
|
components: ["TileGroup", "RadioTile"]
|
|
---
|
|
|
|
<script>
|
|
import { TileGroup, RadioTile } from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
## Default
|
|
|
|
<TileGroup legend="Service pricing tiers" name="plan" selected="standard">
|
|
<RadioTile value="lite">
|
|
Lite plan
|
|
</RadioTile>
|
|
<RadioTile value="standard">
|
|
Standard plan
|
|
</RadioTile>
|
|
<RadioTile value="plus">
|
|
Plus plan
|
|
</RadioTile>
|
|
</TileGroup>
|
|
|
|
## Reactive (one-way binding)
|
|
|
|
<FileSource src="/framed/RadioTile/RadioTileReactiveOneWay" />
|
|
|
|
## Reactive (two-way binding)
|
|
|
|
Binding to the `selected` prop is a more concise approach to managing state.
|
|
|
|
<FileSource src="/framed/RadioTile/RadioTileReactive" />
|
|
|
|
## Light variant
|
|
|
|
<TileGroup legend="Service pricing tiers" name="plan-light" selected="standard">
|
|
<RadioTile light value="lite">
|
|
Lite plan
|
|
</RadioTile>
|
|
<RadioTile light value="standard">
|
|
Standard plan
|
|
</RadioTile>
|
|
<RadioTile light value="plus">
|
|
Plus plan
|
|
</RadioTile>
|
|
</TileGroup>
|
|
|
|
## Disabled state
|
|
|
|
<TileGroup legend="Service pricing tiers" name="plan-disabled" selected="standard">
|
|
<RadioTile value="lite" disabled>
|
|
Lite plan
|
|
</RadioTile>
|
|
<RadioTile value="standard">
|
|
Standard plan
|
|
</RadioTile>
|
|
<RadioTile value="plus" disabled>
|
|
Plus plan
|
|
</RadioTile>
|
|
</TileGroup> |