Radio
Radio buttons allow the user to select one option from a set.
Usage
import { RadioGroup } from 'stwui';
import RadioGroup from 'stwui/radio';
<script lang="ts">
import { RadioGroup } from 'stwui';
</script>
<RadioGroup name="group-1">
<RadioGroup.Radio value="radio-1">
<RadioGroup.Radio.Label slot="label">Radio-1</RadioGroup.Radio.Label>
</RadioGroup.Radio>
<RadioGroup.Radio value="radio-2">
<RadioGroup.Radio.Label slot="label">Radio-2</RadioGroup.Radio.Label>
</RadioGroup.Radio>
<RadioGroup.Radio value="radio-3">
<RadioGroup.Radio.Label slot="label">Radio-3</RadioGroup.Radio.Label>
</RadioGroup.Radio>
<RadioGroup.Radio value="radio-4">
<RadioGroup.Radio.Label slot="label">Radio-4</RadioGroup.Radio.Label>
</RadioGroup.Radio>
</RadioGroup>
Group Label Inline with Description
<script lang="ts">
import { RadioGroup } from 'stwui';
</script>
<RadioGroup name="group-2" selected="radio-2">
<RadioGroup.Label name="label">Radio Group 2</RadioGroup.Label>
<RadioGroup.Radio value="radio-1">
<RadioGroup.Radio.Label slot="label">Radio-1</RadioGroup.Radio.Label>
<RadioGroup.Radio.Description slot="description">
Radio-1 Description
</RadioGroup.Radio.Description>
</RadioGroup.Radio>
<RadioGroup.Radio value="radio-2">
<RadioGroup.Radio.Label slot="label">Radio-2</RadioGroup.Radio.Label>
<RadioGroup.Radio.Description slot="description">
Radio-2 Description
</RadioGroup.Radio.Description>
</RadioGroup.Radio>
<RadioGroup.Radio value="radio-3">
<RadioGroup.Radio.Label slot="label">Radio-3</RadioGroup.Radio.Label>
<RadioGroup.Radio.Description slot="description">
Radio-3 Description
</RadioGroup.Radio.Description>
</RadioGroup.Radio>
<RadioGroup.Radio value="radio-4">
<RadioGroup.Radio.Label slot="label">Radio-4</RadioGroup.Radio.Label>
<RadioGroup.Radio.Description slot="description">
Radio-4 Description
</RadioGroup.Radio.Description>
</RadioGroup.Radio>
</RadioGroup>
Here is an error!
<script lang="ts">
import { RadioGroup } from 'stwui';
let selected: string | undefined = undefined;
let error: string | undefined = 'Here is an error!';
$: if (selected) {
error = undefined;
} else {
error = 'Here is an error!';
}
</script>
<RadioGroup name="group-1" bind:selected {error}>
<RadioGroup.Radio value="radio-1">
<RadioGroup.Radio.Label slot="label">Radio-1</RadioGroup.Radio.Label>
</RadioGroup.Radio>
<RadioGroup.Radio value="radio-2">
<RadioGroup.Radio.Label slot="label">Radio-2</RadioGroup.Radio.Label>
</RadioGroup.Radio>
<RadioGroup.Radio value="radio-3">
<RadioGroup.Radio.Label slot="label">Radio-3</RadioGroup.Radio.Label>
</RadioGroup.Radio>
<RadioGroup.Radio value="radio-4">
<RadioGroup.Radio.Label slot="label">Radio-4</RadioGroup.Radio.Label>
</RadioGroup.Radio>
</RadioGroup>
<script lang="ts">
import { RadioGroup } from 'stwui';
</script>
<RadioGroup name="group-3" type="pill">
<RadioGroup.Radio value="radio-1">Radio-1</RadioGroup.Radio>
<RadioGroup.Radio value="radio-2">Radio-2</RadioGroup.Radio>
<RadioGroup.Radio value="radio-3">Radio-3</RadioGroup.Radio>
<RadioGroup.Radio value="radio-4">Radio-4</RadioGroup.Radio>
</RadioGroup>
Pill with label and grid
<script lang="ts">
import { RadioGroup } from 'stwui';
</script>
<RadioGroup name="group-4" type="pill" class="grid-cols-2">
<RadioGroup.Label slot="label">Radio Group 4</RadioGroup.Label>
<RadioGroup.Radio value="radio-1">Radio-1</RadioGroup.Radio>
<RadioGroup.Radio value="radio-2">Radio-2</RadioGroup.Radio>
<RadioGroup.Radio value="radio-3">Radio-3</RadioGroup.Radio>
<RadioGroup.Radio value="radio-4">Radio-4</RadioGroup.Radio>
</RadioGroup>
RadioGroup Props
| name | string | nanoid() |
| type | 'default' | 'pill' | default |
| selected | string | undefined | |
| error | string | undefined | |
RadioGroup Slots
| label | <RadioGroup.Label slot="label" /> |
| default | <RadioGroup.Radio /> |
RadioGroup.Radio Props
| id | string | undefined | |
| value | string | |
| disabled | boolean | false |
RadioGroup.Radio Slots
| label | <RadioGroup.Radio.Label slot="label" /> |
| description | <RadioGroup.Radio.Description slot="description" /> |
RadioGroup.Radio.Label Slots
RadioGroup.Radio.Description Slots
RadioGroup Class Identifiers
| stwui-radio-group |
| stwui-radio-error |
| stwui-radio-group-label |
| stwui-radio |
| stwui-radio-pill |
| stwui-radio-label |
| stwui-radio-description |
