Radio

Sizes

Small Medium Large

<DemoSpaceX>
  <VelvetRadio @isChecked={{true}} @size="sm">Small</VelvetRadio>
  <VelvetRadio @isChecked={{true}} @size="md">Medium</VelvetRadio>
  <VelvetRadio @isChecked={{true}} @size="lg">Large</VelvetRadio>
</DemoSpaceX>

Disabled

Disabled Disabled

<DemoSpaceX>
  <VelvetRadio @isDisabled={{true}}>Disabled</VelvetRadio>
  <VelvetRadio @isChecked={{true}} @isDisabled={{true}}>Disabled</VelvetRadio>
</DemoSpaceX>

Examples

Handle Change Events

Edit this demo

Use the @onChange argument to handle change events.

Checked: false

Option

<DemoSpaceY>
  <div>Checked: {{this.isChecked}}</div>
  <VelvetRadio @isChecked={{this.isChecked}} @onChange={{this.onChange}}>
    Option
  </VelvetRadio>
</DemoSpaceY>

Arguments

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