Radio Group

Sizes

First Second Third

<DemoSpaceX>
  <VelvetRadioGroup @size="sm" @value="first" class="space-y-2" as |group|>
    <group.Radio @value="first">First</group.Radio>
    <group.Radio @value="second">Second</group.Radio>
    <group.Radio @value="third">Third</group.Radio>
  </VelvetRadioGroup>
  <VelvetRadioGroup @size="md" @value="first" class="space-y-3" as |group|>
    <group.Radio @value="first">First</group.Radio>
    <group.Radio @value="second">Second</group.Radio>
    <group.Radio @value="third">Third</group.Radio>
  </VelvetRadioGroup>
  <VelvetRadioGroup @size="lg" @value="first" class="space-y-4" as |group|>
    <group.Radio @value="first">First</group.Radio>
    <group.Radio @value="second">Second</group.Radio>
    <group.Radio @value="third">Third</group.Radio>
  </VelvetRadioGroup>
</DemoSpaceX>

Disabled

First Second Third

<VelvetRadioGroup
  @isDisabled={{true}}
  @value="first"
  class="space-y-3"
  as |group|
>
  <group.Radio @value="first">First</group.Radio>
  <group.Radio @value="second">Second</group.Radio>
  <group.Radio @value="third">Third</group.Radio>
</VelvetRadioGroup>

Examples

Handle Change Events

Edit this demo

Use the @onChange argument to handle change events.

Value: first

First Second Third

<DemoSpaceY>
  <div>Value: {{this.value}}</div>
  <VelvetRadioGroup
    @onChange={{this.onChange}}
    @value={{this.value}}
    class="space-y-3"
    as |group|
  >
    <group.Radio @value="first">First</group.Radio>
    <group.Radio @value="second">Second</group.Radio>
    <group.Radio @value="third">Third</group.Radio>
  </VelvetRadioGroup>
</DemoSpaceY>

Signature

Element

HTMLDivElement

Blocks

Name	Description	Type
`:default` *	The radios for the radio group.	`[{ Radio: WithBoundArgs<typeof VelvetRadio, 'isDisabled' \| 'name' \| 'size' \| 'privateGroupValue' \| 'privateInGroup' \| 'privateOnChangeGroup'>; }]`

Blocks marked with * are required.

Arguments

Name	Description	Type	Default Value
`@isDisabled`	Indicate if the radio group is disabled.	`boolean`	`false`
`@name`	The name of the radio group.	`string`	`""`
`@onChange`	Handle the radio group's `change` event.	`(value: unknown, event: Event) => void`	`undefined`
`@size`	The size of the radios.	`Size`	`"md"`
`@value`	The value of the radio group.	`unknown`	`undefined`

Arguments marked with * are required.