mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 03:26:36 +00:00
61 lines
No EOL
1.2 KiB
Text
61 lines
No EOL
1.2 KiB
Text
---
|
|
components: ["TileGroup", "RadioTile"]
|
|
source: Tile/RadioTile.svelte
|
|
---
|
|
|
|
<script>
|
|
import { TileGroup, RadioTile } from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
## Default
|
|
|
|
<TileGroup legend="Service pricing tiers">
|
|
<RadioTile value="0" checked>
|
|
Lite plan
|
|
</RadioTile>
|
|
<RadioTile value="1">
|
|
Standard plan
|
|
</RadioTile>
|
|
<RadioTile value="2">
|
|
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">
|
|
<RadioTile light value="0" checked>
|
|
Lite plan
|
|
</RadioTile>
|
|
<RadioTile light value="1">
|
|
Standard plan
|
|
</RadioTile>
|
|
<RadioTile light value="2">
|
|
Plus plan
|
|
</RadioTile>
|
|
</TileGroup>
|
|
|
|
## Disabled state
|
|
|
|
<TileGroup legend="Service pricing tiers">
|
|
<RadioTile value="0" checked>
|
|
Lite plan
|
|
</RadioTile>
|
|
<RadioTile value="1" disabled>
|
|
Standard plan
|
|
</RadioTile>
|
|
<RadioTile value="2" disabled>
|
|
Plus plan
|
|
</RadioTile>
|
|
</TileGroup> |