Radio

A group of radio buttons for selecting one option from a set.

Best apple

Fuji

Gala

Granny Smith

View source

import * as RadioGroup from "@danielfrg/solid-ui/radio-group"
import styles from "./index.module.css"

export function DemoRadioGroupHero() {
  return (
    <RadioGroup.Root defaultValue="fuji-apple" class={styles.radiogroup} aria-label="Best apple">
      <div class={styles.caption}>Best apple</div>

      <label class={styles.item}>
        <RadioGroup.Item value="fuji-apple">
          <RadioGroup.ItemInput />
          <RadioGroup.ItemControl class={styles.radio}>
            <RadioGroup.ItemIndicator class={styles.indicator} />
          </RadioGroup.ItemControl>
        </RadioGroup.Item>
        Fuji
      </label>

      <label class={styles.item}>
        <RadioGroup.Item value="gala-apple">
          <RadioGroup.ItemInput />
          <RadioGroup.ItemControl class={styles.radio}>
            <RadioGroup.ItemIndicator class={styles.indicator} />
          </RadioGroup.ItemControl>
        </RadioGroup.Item>
        Gala
      </label>

      <label class={styles.item}>
        <RadioGroup.Item value="granny-smith-apple">
          <RadioGroup.ItemInput />
          <RadioGroup.ItemControl class={styles.radio}>
            <RadioGroup.ItemIndicator class={styles.indicator} />
          </RadioGroup.ItemControl>
        </RadioGroup.Item>
        Granny Smith
      </label>
    </RadioGroup.Root>
  )
}

.radiogroup {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.25rem;
  color: var(--color-gray-900);
}

.caption {
  font-weight: 500;
}

.item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.radio {
  box-sizing: border-box;
  display: flex;
  width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  outline: 0;
  padding: 0;
  border: none;
  border: 1px solid var(--color-gray-300);
  background-color: transparent;
}

.radio[data-checked] {
  background-color: var(--color-gray-900);
  border-color: var(--color-gray-900);
}

.radio:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

.indicator {
  display: flex;
  align-items: center;
  justify-content: center;
}

.indicator::before {
  content: "";
  border-radius: 100%;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--color-gray-50);
}

.description {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-gray-600);
  margin-top: 0.25rem;
}

.error {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #dc2626;
  margin-top: 0.25rem;
}

.status {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-gray-600);
}

.form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.actions {
  display: flex;
  gap: 0.5rem;
}

.button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  padding: 0 0.75rem;
  outline: 0;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  background-color: var(--color-gray-50);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-gray-900);
  cursor: pointer;
}

@media (hover: hover) {
  .button:hover {
    background-color: var(--color-gray-100);
  }
}

:root {
  --color-blue: oklch(45% 50% 264deg);
  --color-red: oklch(50% 55% 31deg);
  --color-gray-50: oklch(98% 0.25% 264deg);
  --color-gray-100: oklch(12% 9.5% 264deg / 5%);
  --color-gray-200: oklch(12% 9% 264deg / 7%);
  --color-gray-300: oklch(12% 8.5% 264deg / 17%);
  --color-gray-400: oklch(12% 8% 264deg / 38%);
  --color-gray-500: oklch(12% 7.5% 264deg / 50%);
  --color-gray-600: oklch(12% 7% 264deg / 67%);
  --color-gray-700: oklch(12% 6% 264deg / 77%);
  --color-gray-800: oklch(12% 5% 264deg / 85%);
  --color-gray-900: oklch(12% 5% 264deg / 90%);
  --color-gray-950: oklch(12% 5% 264deg / 95%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-blue: oklch(69% 50% 264deg);
    --color-red: oklch(80% 55% 31deg);
    --color-gray-50: oklch(17% 0.25% 264deg);
    --color-gray-100: oklch(28% 0.75% 264deg / 65%);
    --color-gray-200: oklch(29% 0.75% 264deg / 80%);
    --color-gray-300: oklch(35% 0.75% 264deg / 80%);
    --color-gray-400: oklch(47% 0.875% 264deg / 80%);
    --color-gray-500: oklch(64% 1% 264deg / 80%);
    --color-gray-600: oklch(82% 1% 264deg / 80%);
    --color-gray-700: oklch(92% 1.125% 264deg / 80%);
    --color-gray-800: oklch(93% 0.875% 264deg / 85%);
    --color-gray-900: oklch(95% 0.5% 264deg / 90%);
    --color-gray-950: oklch(94% 0.375% 264deg / 95%);
  }
}

Examples

Default value

Use defaultValue to set the initially selected option without controlling the state.

Best apple

Fuji

Gala

Granny Smith

View source

import * as RadioGroup from "@danielfrg/solid-ui/radio-group"
import styles from "./index.module.css"

export function DemoRadioGroupDefaultValue() {
  return (
    <RadioGroup.Root defaultValue="gala-apple" class={styles.radiogroup} aria-label="Best apple">
      <div class={styles.caption}>Best apple</div>

      <label class={styles.item}>
        <RadioGroup.Item value="fuji-apple">
          <RadioGroup.ItemInput />
          <RadioGroup.ItemControl class={styles.radio}>
            <RadioGroup.ItemIndicator class={styles.indicator} />
          </RadioGroup.ItemControl>
        </RadioGroup.Item>
        Fuji
      </label>

      <label class={styles.item}>
        <RadioGroup.Item value="gala-apple">
          <RadioGroup.ItemInput />
          <RadioGroup.ItemControl class={styles.radio}>
            <RadioGroup.ItemIndicator class={styles.indicator} />
          </RadioGroup.ItemControl>
        </RadioGroup.Item>
        Gala
      </label>

      <label class={styles.item}>
        <RadioGroup.Item value="granny-smith-apple">
          <RadioGroup.ItemInput />
          <RadioGroup.ItemControl class={styles.radio}>
            <RadioGroup.ItemIndicator class={styles.indicator} />
          </RadioGroup.ItemControl>
        </RadioGroup.Item>
        Granny Smith
      </label>
    </RadioGroup.Root>
  )
}

.radiogroup {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.25rem;
  color: var(--color-gray-900);
}

.caption {
  font-weight: 500;
}

.item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.radio {
  box-sizing: border-box;
  display: flex;
  width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  outline: 0;
  padding: 0;
  border: none;
  border: 1px solid var(--color-gray-300);
  background-color: transparent;
}

.radio[data-checked] {
  background-color: var(--color-gray-900);
  border-color: var(--color-gray-900);
}

.radio:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

.indicator {
  display: flex;
  align-items: center;
  justify-content: center;
}

.indicator::before {
  content: "";
  border-radius: 100%;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--color-gray-50);
}

.description {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-gray-600);
  margin-top: 0.25rem;
}

.error {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #dc2626;
  margin-top: 0.25rem;
}

.status {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-gray-600);
}

.form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.actions {
  display: flex;
  gap: 0.5rem;
}

.button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  padding: 0 0.75rem;
  outline: 0;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  background-color: var(--color-gray-50);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-gray-900);
  cursor: pointer;
}

@media (hover: hover) {
  .button:hover {
    background-color: var(--color-gray-100);
  }
}

:root {
  --color-blue: oklch(45% 50% 264deg);
  --color-red: oklch(50% 55% 31deg);
  --color-gray-50: oklch(98% 0.25% 264deg);
  --color-gray-100: oklch(12% 9.5% 264deg / 5%);
  --color-gray-200: oklch(12% 9% 264deg / 7%);
  --color-gray-300: oklch(12% 8.5% 264deg / 17%);
  --color-gray-400: oklch(12% 8% 264deg / 38%);
  --color-gray-500: oklch(12% 7.5% 264deg / 50%);
  --color-gray-600: oklch(12% 7% 264deg / 67%);
  --color-gray-700: oklch(12% 6% 264deg / 77%);
  --color-gray-800: oklch(12% 5% 264deg / 85%);
  --color-gray-900: oklch(12% 5% 264deg / 90%);
  --color-gray-950: oklch(12% 5% 264deg / 95%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-blue: oklch(69% 50% 264deg);
    --color-red: oklch(80% 55% 31deg);
    --color-gray-50: oklch(17% 0.25% 264deg);
    --color-gray-100: oklch(28% 0.75% 264deg / 65%);
    --color-gray-200: oklch(29% 0.75% 264deg / 80%);
    --color-gray-300: oklch(35% 0.75% 264deg / 80%);
    --color-gray-400: oklch(47% 0.875% 264deg / 80%);
    --color-gray-500: oklch(64% 1% 264deg / 80%);
    --color-gray-600: oklch(82% 1% 264deg / 80%);
    --color-gray-700: oklch(92% 1.125% 264deg / 80%);
    --color-gray-800: oklch(93% 0.875% 264deg / 85%);
    --color-gray-900: oklch(95% 0.5% 264deg / 90%);
    --color-gray-950: oklch(94% 0.375% 264deg / 95%);
  }
}

Controlled

Use value and onChange to control the selected option externally.

Best apple

Fuji

Gala

Granny Smith

Selected: fuji-apple

View source

import { createSignal } from "solid-js"
import * as RadioGroup from "@danielfrg/solid-ui/radio-group"
import styles from "./index.module.css"

export function DemoRadioGroupControlled() {
  const [value, setValue] = createSignal("fuji-apple")

  return (
    <div>
      <RadioGroup.Root value={value()} onChange={setValue} class={styles.radiogroup} aria-label="Best apple">
        <div class={styles.caption}>Best apple</div>

        <label class={styles.item}>
          <RadioGroup.Item value="fuji-apple">
            <RadioGroup.ItemInput />
            <RadioGroup.ItemControl class={styles.radio}>
              <RadioGroup.ItemIndicator class={styles.indicator} />
            </RadioGroup.ItemControl>
          </RadioGroup.Item>
          Fuji
        </label>

        <label class={styles.item}>
          <RadioGroup.Item value="gala-apple">
            <RadioGroup.ItemInput />
            <RadioGroup.ItemControl class={styles.radio}>
              <RadioGroup.ItemIndicator class={styles.indicator} />
            </RadioGroup.ItemControl>
          </RadioGroup.Item>
          Gala
        </label>

        <label class={styles.item}>
          <RadioGroup.Item value="granny-smith-apple">
            <RadioGroup.ItemInput />
            <RadioGroup.ItemControl class={styles.radio}>
              <RadioGroup.ItemIndicator class={styles.indicator} />
            </RadioGroup.ItemControl>
          </RadioGroup.Item>
          Granny Smith
        </label>
      </RadioGroup.Root>
      <p class={styles.status}>Selected: {value()}</p>
    </div>
  )
}

.radiogroup {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.25rem;
  color: var(--color-gray-900);
}

.caption {
  font-weight: 500;
}

.item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.radio {
  box-sizing: border-box;
  display: flex;
  width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  outline: 0;
  padding: 0;
  border: none;
  border: 1px solid var(--color-gray-300);
  background-color: transparent;
}

.radio[data-checked] {
  background-color: var(--color-gray-900);
  border-color: var(--color-gray-900);
}

.radio:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

.indicator {
  display: flex;
  align-items: center;
  justify-content: center;
}

.indicator::before {
  content: "";
  border-radius: 100%;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--color-gray-50);
}

.description {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-gray-600);
  margin-top: 0.25rem;
}

.error {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #dc2626;
  margin-top: 0.25rem;
}

.status {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-gray-600);
}

.form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.actions {
  display: flex;
  gap: 0.5rem;
}

.button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  padding: 0 0.75rem;
  outline: 0;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  background-color: var(--color-gray-50);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-gray-900);
  cursor: pointer;
}

@media (hover: hover) {
  .button:hover {
    background-color: var(--color-gray-100);
  }
}

:root {
  --color-blue: oklch(45% 50% 264deg);
  --color-red: oklch(50% 55% 31deg);
  --color-gray-50: oklch(98% 0.25% 264deg);
  --color-gray-100: oklch(12% 9.5% 264deg / 5%);
  --color-gray-200: oklch(12% 9% 264deg / 7%);
  --color-gray-300: oklch(12% 8.5% 264deg / 17%);
  --color-gray-400: oklch(12% 8% 264deg / 38%);
  --color-gray-500: oklch(12% 7.5% 264deg / 50%);
  --color-gray-600: oklch(12% 7% 264deg / 67%);
  --color-gray-700: oklch(12% 6% 264deg / 77%);
  --color-gray-800: oklch(12% 5% 264deg / 85%);
  --color-gray-900: oklch(12% 5% 264deg / 90%);
  --color-gray-950: oklch(12% 5% 264deg / 95%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-blue: oklch(69% 50% 264deg);
    --color-red: oklch(80% 55% 31deg);
    --color-gray-50: oklch(17% 0.25% 264deg);
    --color-gray-100: oklch(28% 0.75% 264deg / 65%);
    --color-gray-200: oklch(29% 0.75% 264deg / 80%);
    --color-gray-300: oklch(35% 0.75% 264deg / 80%);
    --color-gray-400: oklch(47% 0.875% 264deg / 80%);
    --color-gray-500: oklch(64% 1% 264deg / 80%);
    --color-gray-600: oklch(82% 1% 264deg / 80%);
    --color-gray-700: oklch(92% 1.125% 264deg / 80%);
    --color-gray-800: oklch(93% 0.875% 264deg / 85%);
    --color-gray-900: oklch(95% 0.5% 264deg / 90%);
    --color-gray-950: oklch(94% 0.375% 264deg / 95%);
  }
}

Description

Use RadioGroup.Description to add a hint below the options.

Best apple

Fuji

Gala

Granny Smith

Select your favorite variety. All are available year-round.

View source

import * as RadioGroup from "@danielfrg/solid-ui/radio-group"
import styles from "./index.module.css"

export function DemoRadioGroupDescription() {
  return (
    <RadioGroup.Root defaultValue="fuji-apple" class={styles.radiogroup} aria-label="Best apple">
      <div class={styles.caption}>Best apple</div>

      <label class={styles.item}>
        <RadioGroup.Item value="fuji-apple">
          <RadioGroup.ItemInput />
          <RadioGroup.ItemControl class={styles.radio}>
            <RadioGroup.ItemIndicator class={styles.indicator} />
          </RadioGroup.ItemControl>
        </RadioGroup.Item>
        Fuji
      </label>

      <label class={styles.item}>
        <RadioGroup.Item value="gala-apple">
          <RadioGroup.ItemInput />
          <RadioGroup.ItemControl class={styles.radio}>
            <RadioGroup.ItemIndicator class={styles.indicator} />
          </RadioGroup.ItemControl>
        </RadioGroup.Item>
        Gala
      </label>

      <label class={styles.item}>
        <RadioGroup.Item value="granny-smith-apple">
          <RadioGroup.ItemInput />
          <RadioGroup.ItemControl class={styles.radio}>
            <RadioGroup.ItemIndicator class={styles.indicator} />
          </RadioGroup.ItemControl>
        </RadioGroup.Item>
        Granny Smith
      </label>

      <RadioGroup.Description class={styles.description}>
        Select your favorite variety. All are available year-round.
      </RadioGroup.Description>
    </RadioGroup.Root>
  )
}

.radiogroup {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.25rem;
  color: var(--color-gray-900);
}

.caption {
  font-weight: 500;
}

.item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.radio {
  box-sizing: border-box;
  display: flex;
  width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  outline: 0;
  padding: 0;
  border: none;
  border: 1px solid var(--color-gray-300);
  background-color: transparent;
}

.radio[data-checked] {
  background-color: var(--color-gray-900);
  border-color: var(--color-gray-900);
}

.radio:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

.indicator {
  display: flex;
  align-items: center;
  justify-content: center;
}

.indicator::before {
  content: "";
  border-radius: 100%;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--color-gray-50);
}

.description {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-gray-600);
  margin-top: 0.25rem;
}

.error {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #dc2626;
  margin-top: 0.25rem;
}

.status {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-gray-600);
}

.form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.actions {
  display: flex;
  gap: 0.5rem;
}

.button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  padding: 0 0.75rem;
  outline: 0;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  background-color: var(--color-gray-50);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-gray-900);
  cursor: pointer;
}

@media (hover: hover) {
  .button:hover {
    background-color: var(--color-gray-100);
  }
}

:root {
  --color-blue: oklch(45% 50% 264deg);
  --color-red: oklch(50% 55% 31deg);
  --color-gray-50: oklch(98% 0.25% 264deg);
  --color-gray-100: oklch(12% 9.5% 264deg / 5%);
  --color-gray-200: oklch(12% 9% 264deg / 7%);
  --color-gray-300: oklch(12% 8.5% 264deg / 17%);
  --color-gray-400: oklch(12% 8% 264deg / 38%);
  --color-gray-500: oklch(12% 7.5% 264deg / 50%);
  --color-gray-600: oklch(12% 7% 264deg / 67%);
  --color-gray-700: oklch(12% 6% 264deg / 77%);
  --color-gray-800: oklch(12% 5% 264deg / 85%);
  --color-gray-900: oklch(12% 5% 264deg / 90%);
  --color-gray-950: oklch(12% 5% 264deg / 95%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-blue: oklch(69% 50% 264deg);
    --color-red: oklch(80% 55% 31deg);
    --color-gray-50: oklch(17% 0.25% 264deg);
    --color-gray-100: oklch(28% 0.75% 264deg / 65%);
    --color-gray-200: oklch(29% 0.75% 264deg / 80%);
    --color-gray-300: oklch(35% 0.75% 264deg / 80%);
    --color-gray-400: oklch(47% 0.875% 264deg / 80%);
    --color-gray-500: oklch(64% 1% 264deg / 80%);
    --color-gray-600: oklch(82% 1% 264deg / 80%);
    --color-gray-700: oklch(92% 1.125% 264deg / 80%);
    --color-gray-800: oklch(93% 0.875% 264deg / 85%);
    --color-gray-900: oklch(95% 0.5% 264deg / 90%);
    --color-gray-950: oklch(94% 0.375% 264deg / 95%);
  }
}

Error message

Use validationState and RadioGroup.ErrorMessage to show validation feedback.

Best apple

Fuji

Gala

Granny Smith

Please select an apple variety.

View source

import { createSignal } from "solid-js"
import * as RadioGroup from "@danielfrg/solid-ui/radio-group"
import styles from "./index.module.css"

export function DemoRadioGroupErrorMessage() {
  const [value, setValue] = createSignal("")

  return (
    <RadioGroup.Root
      value={value()}
      onChange={setValue}
      validationState={!value() ? "invalid" : "valid"}
      class={styles.radiogroup}
      aria-label="Best apple"
    >
      <div class={styles.caption}>Best apple</div>

      <label class={styles.item}>
        <RadioGroup.Item value="fuji-apple">
          <RadioGroup.ItemInput />
          <RadioGroup.ItemControl class={styles.radio}>
            <RadioGroup.ItemIndicator class={styles.indicator} />
          </RadioGroup.ItemControl>
        </RadioGroup.Item>
        Fuji
      </label>

      <label class={styles.item}>
        <RadioGroup.Item value="gala-apple">
          <RadioGroup.ItemInput />
          <RadioGroup.ItemControl class={styles.radio}>
            <RadioGroup.ItemIndicator class={styles.indicator} />
          </RadioGroup.ItemControl>
        </RadioGroup.Item>
        Gala
      </label>

      <label class={styles.item}>
        <RadioGroup.Item value="granny-smith-apple">
          <RadioGroup.ItemInput />
          <RadioGroup.ItemControl class={styles.radio}>
            <RadioGroup.ItemIndicator class={styles.indicator} />
          </RadioGroup.ItemControl>
        </RadioGroup.Item>
        Granny Smith
      </label>

      <RadioGroup.ErrorMessage class={styles.error}>Please select an apple variety.</RadioGroup.ErrorMessage>
    </RadioGroup.Root>
  )
}

.radiogroup {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.25rem;
  color: var(--color-gray-900);
}

.caption {
  font-weight: 500;
}

.item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.radio {
  box-sizing: border-box;
  display: flex;
  width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  outline: 0;
  padding: 0;
  border: none;
  border: 1px solid var(--color-gray-300);
  background-color: transparent;
}

.radio[data-checked] {
  background-color: var(--color-gray-900);
  border-color: var(--color-gray-900);
}

.radio:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

.indicator {
  display: flex;
  align-items: center;
  justify-content: center;
}

.indicator::before {
  content: "";
  border-radius: 100%;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--color-gray-50);
}

.description {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-gray-600);
  margin-top: 0.25rem;
}

.error {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #dc2626;
  margin-top: 0.25rem;
}

.status {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-gray-600);
}

.form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.actions {
  display: flex;
  gap: 0.5rem;
}

.button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  padding: 0 0.75rem;
  outline: 0;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  background-color: var(--color-gray-50);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-gray-900);
  cursor: pointer;
}

@media (hover: hover) {
  .button:hover {
    background-color: var(--color-gray-100);
  }
}

:root {
  --color-blue: oklch(45% 50% 264deg);
  --color-red: oklch(50% 55% 31deg);
  --color-gray-50: oklch(98% 0.25% 264deg);
  --color-gray-100: oklch(12% 9.5% 264deg / 5%);
  --color-gray-200: oklch(12% 9% 264deg / 7%);
  --color-gray-300: oklch(12% 8.5% 264deg / 17%);
  --color-gray-400: oklch(12% 8% 264deg / 38%);
  --color-gray-500: oklch(12% 7.5% 264deg / 50%);
  --color-gray-600: oklch(12% 7% 264deg / 67%);
  --color-gray-700: oklch(12% 6% 264deg / 77%);
  --color-gray-800: oklch(12% 5% 264deg / 85%);
  --color-gray-900: oklch(12% 5% 264deg / 90%);
  --color-gray-950: oklch(12% 5% 264deg / 95%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-blue: oklch(69% 50% 264deg);
    --color-red: oklch(80% 55% 31deg);
    --color-gray-50: oklch(17% 0.25% 264deg);
    --color-gray-100: oklch(28% 0.75% 264deg / 65%);
    --color-gray-200: oklch(29% 0.75% 264deg / 80%);
    --color-gray-300: oklch(35% 0.75% 264deg / 80%);
    --color-gray-400: oklch(47% 0.875% 264deg / 80%);
    --color-gray-500: oklch(64% 1% 264deg / 80%);
    --color-gray-600: oklch(82% 1% 264deg / 80%);
    --color-gray-700: oklch(92% 1.125% 264deg / 80%);
    --color-gray-800: oklch(93% 0.875% 264deg / 85%);
    --color-gray-900: oklch(95% 0.5% 264deg / 90%);
    --color-gray-950: oklch(94% 0.375% 264deg / 95%);
  }
}

HTML form

Use the name prop to include the selected value in a native form submission.

View source

import * as RadioGroup from "@danielfrg/solid-ui/radio-group"
import styles from "./index.module.css"

export function DemoRadioGroupHtmlForm() {
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault()
        const data = new FormData(e.currentTarget)
        window.alert(JSON.stringify(Object.fromEntries(data), null, 2))
      }}
      class={styles.form}
    >
      <RadioGroup.Root name="apple" defaultValue="fuji-apple" class={styles.radiogroup} aria-label="Best apple">
        <div class={styles.caption}>Best apple</div>

        <label class={styles.item}>
          <RadioGroup.Item value="fuji-apple">
            <RadioGroup.ItemInput />
            <RadioGroup.ItemControl class={styles.radio}>
              <RadioGroup.ItemIndicator class={styles.indicator} />
            </RadioGroup.ItemControl>
          </RadioGroup.Item>
          Fuji
        </label>

        <label class={styles.item}>
          <RadioGroup.Item value="gala-apple">
            <RadioGroup.ItemInput />
            <RadioGroup.ItemControl class={styles.radio}>
              <RadioGroup.ItemIndicator class={styles.indicator} />
            </RadioGroup.ItemControl>
          </RadioGroup.Item>
          Gala
        </label>

        <label class={styles.item}>
          <RadioGroup.Item value="granny-smith-apple">
            <RadioGroup.ItemInput />
            <RadioGroup.ItemControl class={styles.radio}>
              <RadioGroup.ItemIndicator class={styles.indicator} />
            </RadioGroup.ItemControl>
          </RadioGroup.Item>
          Granny Smith
        </label>
      </RadioGroup.Root>
      <div class={styles.actions}>
        <button type="reset" class={styles.button}>
          Reset
        </button>
        <button type="submit" class={styles.button}>
          Submit
        </button>
      </div>
    </form>
  )
}

.radiogroup {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.25rem;
  color: var(--color-gray-900);
}

.caption {
  font-weight: 500;
}

.item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.radio {
  box-sizing: border-box;
  display: flex;
  width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  outline: 0;
  padding: 0;
  border: none;
  border: 1px solid var(--color-gray-300);
  background-color: transparent;
}

.radio[data-checked] {
  background-color: var(--color-gray-900);
  border-color: var(--color-gray-900);
}

.radio:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

.indicator {
  display: flex;
  align-items: center;
  justify-content: center;
}

.indicator::before {
  content: "";
  border-radius: 100%;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--color-gray-50);
}

.description {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-gray-600);
  margin-top: 0.25rem;
}

.error {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #dc2626;
  margin-top: 0.25rem;
}

.status {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-gray-600);
}

.form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.actions {
  display: flex;
  gap: 0.5rem;
}

.button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  padding: 0 0.75rem;
  outline: 0;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.375rem;
  background-color: var(--color-gray-50);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-gray-900);
  cursor: pointer;
}

@media (hover: hover) {
  .button:hover {
    background-color: var(--color-gray-100);
  }
}

:root {
  --color-blue: oklch(45% 50% 264deg);
  --color-red: oklch(50% 55% 31deg);
  --color-gray-50: oklch(98% 0.25% 264deg);
  --color-gray-100: oklch(12% 9.5% 264deg / 5%);
  --color-gray-200: oklch(12% 9% 264deg / 7%);
  --color-gray-300: oklch(12% 8.5% 264deg / 17%);
  --color-gray-400: oklch(12% 8% 264deg / 38%);
  --color-gray-500: oklch(12% 7.5% 264deg / 50%);
  --color-gray-600: oklch(12% 7% 264deg / 67%);
  --color-gray-700: oklch(12% 6% 264deg / 77%);
  --color-gray-800: oklch(12% 5% 264deg / 85%);
  --color-gray-900: oklch(12% 5% 264deg / 90%);
  --color-gray-950: oklch(12% 5% 264deg / 95%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-blue: oklch(69% 50% 264deg);
    --color-red: oklch(80% 55% 31deg);
    --color-gray-50: oklch(17% 0.25% 264deg);
    --color-gray-100: oklch(28% 0.75% 264deg / 65%);
    --color-gray-200: oklch(29% 0.75% 264deg / 80%);
    --color-gray-300: oklch(35% 0.75% 264deg / 80%);
    --color-gray-400: oklch(47% 0.875% 264deg / 80%);
    --color-gray-500: oklch(64% 1% 264deg / 80%);
    --color-gray-600: oklch(82% 1% 264deg / 80%);
    --color-gray-700: oklch(92% 1.125% 264deg / 80%);
    --color-gray-800: oklch(93% 0.875% 264deg / 85%);
    --color-gray-900: oklch(95% 0.5% 264deg / 90%);
    --color-gray-950: oklch(94% 0.375% 264deg / 95%);
  }
}