RadioGroup

one choice out of a few, drawn as ( ) and (•).

usage

scenario

example

code

import { RadioGroup } from 'charcell/react';

export function RadioGroupExample() {
  return (
    <RadioGroup
      name="gang"
      items={[
        { value: 'polecats', label: 'polecats' },
        { value: 'vultures', label: 'vultures' },
        { value: 'cavefish', label: 'cavefish' },
        { value: 'rottwheelers', label: 'rottwheelers', disabled: true },
      ]}
      label="ride with"
      defaultValue="polecats"
    />
  );
}

<script setup lang="ts">
import { RadioGroup } from 'charcell/vue';
</script>

<template>
  <RadioGroup
    name="gang"
    :items="[
      { value: 'polecats', label: 'polecats' },
      { value: 'vultures', label: 'vultures' },
      { value: 'cavefish', label: 'cavefish' },
      { value: 'rottwheelers', label: 'rottwheelers', disabled: true },
    ]"
    label="ride with"
    defaultValue="polecats"
  />
</template>

<script lang="ts">
  import { RadioGroup } from 'charcell/svelte';
</script>

<RadioGroup
  name="gang"
  items={[
    { value: 'polecats', label: 'polecats' },
    { value: 'vultures', label: 'vultures' },
    { value: 'cavefish', label: 'cavefish' },
    { value: 'rottwheelers', label: 'rottwheelers', disabled: true },
  ]}
  label="ride with"
  defaultValue="polecats"
/>

<div
  class="CharcellRadioGroup CharcellRadioGroup--labeled"
  role="radiogroup"
  aria-labelledby="gang-label"
>
  <span class="CharcellRadioGroup__label" id="gang-label">ride with</span>
  <div class="CharcellRadioGroup__items">
    <label class="CharcellRadioGroup__item"
      ><input
        class="CharcellRadioGroup__input"
        type="radio"
        name="gang"
        value="polecats"
        checked
      /><span class="CharcellRadioGroup__mark" aria-hidden="true"></span
      >polecats</label
    ><label class="CharcellRadioGroup__item"
      ><input
        class="CharcellRadioGroup__input"
        type="radio"
        name="gang"
        value="vultures"
      /><span class="CharcellRadioGroup__mark" aria-hidden="true"></span
      >vultures</label
    ><label class="CharcellRadioGroup__item"
      ><input
        class="CharcellRadioGroup__input"
        type="radio"
        name="gang"
        value="cavefish"
      /><span class="CharcellRadioGroup__mark" aria-hidden="true"></span
      >cavefish</label
    ><label class="CharcellRadioGroup__item"
      ><input
        class="CharcellRadioGroup__input"
        type="radio"
        name="gang"
        value="rottwheelers"
        disabled
      /><span class="CharcellRadioGroup__mark" aria-hidden="true"></span
      >rottwheelers</label
    >
  </div>
</div>

import { RadioGroup } from 'charcell/react';

export function RadioGroupExample() {
  return (
    <RadioGroup
      name="gang"
      items={[
        { value: 'polecats', label: 'polecats' },
        { value: 'vultures', label: 'vultures' },
        { value: 'cavefish', label: 'cavefish' },
        { value: 'rottwheelers', label: 'rottwheelers', disabled: true },
      ]}
      label="ride with"
      defaultValue="polecats"
      disabled
    />
  );
}

<script setup lang="ts">
import { RadioGroup } from 'charcell/vue';
</script>

<template>
  <RadioGroup
    name="gang"
    :items="[
      { value: 'polecats', label: 'polecats' },
      { value: 'vultures', label: 'vultures' },
      { value: 'cavefish', label: 'cavefish' },
      { value: 'rottwheelers', label: 'rottwheelers', disabled: true },
    ]"
    label="ride with"
    defaultValue="polecats"
    disabled
  />
</template>

<script lang="ts">
  import { RadioGroup } from 'charcell/svelte';
</script>

<RadioGroup
  name="gang"
  items={[
    { value: 'polecats', label: 'polecats' },
    { value: 'vultures', label: 'vultures' },
    { value: 'cavefish', label: 'cavefish' },
    { value: 'rottwheelers', label: 'rottwheelers', disabled: true },
  ]}
  label="ride with"
  defaultValue="polecats"
  disabled
/>

<div
  class="CharcellRadioGroup CharcellRadioGroup--labeled"
  role="radiogroup"
  aria-labelledby="gang-label"
  aria-disabled="true"
>
  <span class="CharcellRadioGroup__label" id="gang-label">ride with</span>
  <div class="CharcellRadioGroup__items">
    <label class="CharcellRadioGroup__item"
      ><input
        class="CharcellRadioGroup__input"
        type="radio"
        name="gang"
        value="polecats"
        disabled
        checked
      /><span class="CharcellRadioGroup__mark" aria-hidden="true"></span
      >polecats</label
    ><label class="CharcellRadioGroup__item"
      ><input
        class="CharcellRadioGroup__input"
        type="radio"
        name="gang"
        value="vultures"
        disabled
      /><span class="CharcellRadioGroup__mark" aria-hidden="true"></span
      >vultures</label
    ><label class="CharcellRadioGroup__item"
      ><input
        class="CharcellRadioGroup__input"
        type="radio"
        name="gang"
        value="cavefish"
        disabled
      /><span class="CharcellRadioGroup__mark" aria-hidden="true"></span
      >cavefish</label
    ><label class="CharcellRadioGroup__item"
      ><input
        class="CharcellRadioGroup__input"
        type="radio"
        name="gang"
        value="rottwheelers"
        disabled
      /><span class="CharcellRadioGroup__mark" aria-hidden="true"></span
      >rottwheelers</label
    >
  </div>
</div>

import { RadioGroup } from 'charcell/react';

export function RadioGroupExample() {
  return (
    <RadioGroup
      name="gang"
      items={[
        { value: 'polecats', label: 'polecats' },
        { value: 'vultures', label: 'vultures' },
        { value: 'cavefish', label: 'cavefish' },
        { value: 'rottwheelers', label: 'rottwheelers', disabled: true },
      ]}
      label="ride with"
      defaultValue="polecats"
      orientation="horizontal"
    />
  );
}

<script setup lang="ts">
import { RadioGroup } from 'charcell/vue';
</script>

<template>
  <RadioGroup
    name="gang"
    :items="[
      { value: 'polecats', label: 'polecats' },
      { value: 'vultures', label: 'vultures' },
      { value: 'cavefish', label: 'cavefish' },
      { value: 'rottwheelers', label: 'rottwheelers', disabled: true },
    ]"
    label="ride with"
    defaultValue="polecats"
    orientation="horizontal"
  />
</template>

<script lang="ts">
  import { RadioGroup } from 'charcell/svelte';
</script>

<RadioGroup
  name="gang"
  items={[
    { value: 'polecats', label: 'polecats' },
    { value: 'vultures', label: 'vultures' },
    { value: 'cavefish', label: 'cavefish' },
    { value: 'rottwheelers', label: 'rottwheelers', disabled: true },
  ]}
  label="ride with"
  defaultValue="polecats"
  orientation="horizontal"
/>

<div
  class="CharcellRadioGroup CharcellRadioGroup--labeled CharcellRadioGroup--horizontal"
  role="radiogroup"
  aria-labelledby="gang-label"
>
  <span class="CharcellRadioGroup__label" id="gang-label">ride with</span>
  <div class="CharcellRadioGroup__items">
    <label class="CharcellRadioGroup__item"
      ><input
        class="CharcellRadioGroup__input"
        type="radio"
        name="gang"
        value="polecats"
        checked
      /><span class="CharcellRadioGroup__mark" aria-hidden="true"></span
      >polecats</label
    ><label class="CharcellRadioGroup__item"
      ><input
        class="CharcellRadioGroup__input"
        type="radio"
        name="gang"
        value="vultures"
      /><span class="CharcellRadioGroup__mark" aria-hidden="true"></span
      >vultures</label
    ><label class="CharcellRadioGroup__item"
      ><input
        class="CharcellRadioGroup__input"
        type="radio"
        name="gang"
        value="cavefish"
      /><span class="CharcellRadioGroup__mark" aria-hidden="true"></span
      >cavefish</label
    ><label class="CharcellRadioGroup__item"
      ><input
        class="CharcellRadioGroup__input"
        type="radio"
        name="gang"
        value="rottwheelers"
        disabled
      /><span class="CharcellRadioGroup__mark" aria-hidden="true"></span
      >rottwheelers</label
    >
  </div>
</div>

as text

at rest

ride with  (•) polecats
           ( ) vultures
           ( ) cavefish
           ( ) rottwheelers

hover

ride with  (•) polecats 
           ( ) vultures
           ( ) cavefish
           ( ) rottwheelers

focus

ride with ❯(•) polecats
           ( ) vultures
           ( ) cavefish
           ( ) rottwheelers

props

namestring: The radios' shared form name; also the root of the label's id.
itemsRadioGroupItem[]: The choices, in order: { value, label, disabled }.
labelstring: The group's name, in the mid gray beside the items.
valuestring: Controlled chosen value (pair with onValueChange).; binds with v-model:value in vue, bind:value in svelte
defaultValuestring: Uncontrolled initial value - the native radios own it from there.
disabledboolean: Disables every radio; the rows rest at mid.
orientation'vertical' | 'horizontal'= 'vertical': vertical stacks the items; horizontal runs them in a row.
onValueChange(value: string) => void: Called with the chosen value.

it also takes any other attribute of its <div>.