Radio

Radio

The Radio component allows users to select a single option from a set of mutually exclusive choices.

Radio components can be used individually or grouped with RadioGroup. When used inside a RadioGroup, the group’s value determines which Radio is selected.

For most use cases involving multiple related options, use RadioGroup to manage the selected value.

import Radio from "rocksolidjs/Radio";
import Label from "rocksolidjs/Label";

export default function Example() {
  return (
    <div class="flex items-center gap-1">
      <Radio
        id="notifications"
        value="notifications"
      />
      <Label for="notifications">
        Enable notifications
      </Label>
    </div>
  );
}

Examples

Radio Group

Use RadioGroup when presenting multiple mutually exclusive options. The group manages the selected value and provides a single value for the set of Radio components.

import Radio from "rocksolidjs/Radio";
import RadioGroup from "rocksolidjs/RadioGroup";
import Label from "rocksolidjs/Label";

export default function Example() {
  return (
    <RadioGroup
      class="flex flex-col gap-4"
      name="plan"
    >
      <div class="flex items-center gap-1">
        <Radio id="free" value="free" />
        <Label for="free">Free</Label>
      </div>
      <div class="flex items-center gap-1">
        <Radio id="pro" value="pro" />
        <Label for="pro">Pro</Label>
      </div>
      <div class="flex items-center gap-1">
        <Radio id="enterprise" value="enterprise" />
        <Label for="enterprise">Enterprise</Label>
      </div>
    </RadioGroup>
  );
}

Each Radio inside the group should have a unique value. The selected Radio is determined by the group’s value or defaultValue.

Controlled Radio Group

Use the value prop on RadioGroup when the selected option should be controlled by application state.

import { createSignal } from "solid-js";
import Radio from "rocksolidjs/Radio";
import RadioGroup from "rocksolidjs/RadioGroup";
import Label from "rocksolidjs/Label";
import Typography from "rocksolidjs/Typography";

export default function Example() {
  const [plan, setPlan] = createSignal("free");

  return (
    <div class="flex flex-col gap-2 max-w-sm">
      <RadioGroup
        class="flex flex-col gap-3"
        name="controlled-plan"
        value={plan()}
        onChange={(_, value) => setPlan(value)}
      >
        <div class="flex items-center gap-1">
          <Radio id="controlled-free" value="free"/>
          <Label for="controlled-free">Free</Label>
        </div>
        <div class="flex items-center gap-1">
          <Radio id="controlled-pro" value="pro" />
          <Label for="controlled-pro">Pro</Label>
        </div>
        <div class="flex items-center gap-1">
          <Radio id="controlled-enterprise" value="enterprise" />
          <Label for="controlled-enterprise">
            Enterprise
          </Label>
        </div>
      </RadioGroup>

      <Typography>
        Selected plan: {plan()}
      </Typography>
    </div>
  );
}

Use onChange to update the state when the selected Radio changes.

Default Value

Use defaultValue to specify the initially selected option without controlling the selected value after initialization.

import Radio from "rocksolidjs/Radio";
import RadioGroup from "rocksolidjs/RadioGroup";
import Label from "rocksolidjs/Label";

export default function Example() {
  return (
    <RadioGroup
      class="flex flex-col gap-4"
      name="payment-method"
      defaultValue="bank"
    >
      <div class="flex items-center gap-1">
        <Radio id="card" value="card" />
        <Label for="card">Credit card</Label>
      </div>
      <div class="flex items-center gap-1">
        <Radio id="bank" value="bank" />
        <Label for="bank">Bank transfer</Label>
      </div>
      <div class="flex items-center gap-1">
        <Radio id="paypal" value="paypal" />
        <Label for="paypal">PayPal</Label>
      </div>
    </RadioGroup>
  );
}

Colors

Use the color prop to communicate the semantic meaning or state of a Radio.

import Radio from "rocksolidjs/Radio";
import Label from "rocksolidjs/Label";

export default function Example() {
  const colors = [
    "default",
    "success",
    "warning",
    "info",
    "error",
  ] as const;

  return (
    <div class="flex flex-col gap-4">
      {colors.map((color) => (
        <div class="flex items-center gap-1">
          <Radio
            id={`radio-${color}`}
            value={color}
            color={color}
          />
          <Label for={`radio-${color}`}>
            {color}
          </Label>
        </div>
      ))}
    </div>
  );
}

Sizes

Use the size prop to control the visual size of the Radio.

import Radio from "rocksolidjs/Radio";
import Label from "rocksolidjs/Label";

export default function Example() {
  return (
    <div class="flex flex-col gap-4">
      <div class="flex items-center gap-1">
        <Radio
          id="small-radio"
          value="small"
          size="small"
          checked
        />
        <Label for="small-radio">Small</Label>
      </div>
      <div class="flex items-center gap-1">
        <Radio
          id="medium-radio"
          value="medium"
          size="medium"
          checked
        />
        <Label for="medium-radio">Medium</Label>
      </div>
      <div class="flex items-center gap-1">
        <Radio
          id="large-radio"
          value="large"
          size="large"
          checked
        />
        <Label for="large-radio">Large</Label>
      </div>
    </div>
  );
}

Disabled

Use the disabled prop to prevent a Radio from being selected.

import Radio from "rocksolidjs/Radio";
import RadioGroup from "rocksolidjs/RadioGroup";
import Label from "rocksolidjs/Label";

export default function Example() {
  return (
    <RadioGroup
      name="delivery"
      defaultValue="standard"
      class="flex flex-col gap-4"
    >
      <div class="flex items-center gap-1">
        <Radio id="standard" value="standard" />
        <Label for="standard">
          Standard delivery
        </Label>
      </div>
      <div class="flex items-center gap-1">
        <Radio id="express" value="express" />
        <Label for="express">
          Express delivery
        </Label>
      </div>
      <div class="flex items-center gap-1">
        <Radio
          id="same-day"
          value="same-day"
          disabled
        />
        <Label for="same-day" disabled>
          Same-day delivery
        </Label>
      </div>
    </RadioGroup>
  );
}

Name

When using RadioGroup, the group’s name can be used to provide the name for the group of Radio controls.

import Radio from "rocksolidjs/Radio";
import RadioGroup from "rocksolidjs/RadioGroup";
import Label from "rocksolidjs/Label";

export default function Example() {
  return (
    <RadioGroup
      class="flex flex-col gap-4"
      name="contact-method"
      defaultValue="email"
    >
      <div class="flex items-center gap-1">
        <Radio id="contact-email" value="email" />
        <Label for="contact-email">Email</Label>
      </div>
      <div class="flex items-center gap-1">
        <Radio id="contact-phone" value="phone" />
        <Label for="contact-phone">Phone</Label>
      </div>
      <div class="flex items-center gap-1">
        <Radio id="contact-sms" value="sms" />
        <Label for="contact-sms">SMS</Label>
      </div>
    </RadioGroup>
  );
}

Accessibility

  • Use RadioGroup for related Radio controls that represent a single choice.
  • Provide a meaningful label or accessible name for each group.
  • Give each Radio a meaningful value.
  • Use disabled when an option is unavailable rather than removing useful context from the user.
  • Do not rely on color alone to communicate selection or validation state.
  • Ensure the selected state is visually distinguishable from the unselected state.
  • Use name when integrating Radio controls with native form behavior.

API

RadioGroup

The RadioGroup component manages a collection of Radio controls and ensures that a single value is selected at a time.

Prop Type Required Default Description
children JSXElement No — Radio components rendered as part of the group.
class string No — Additional CSS class name(s) applied to the RadioGroup.
defaultValue string No — Sets the initially selected Radio without controlling the group after initialization.
name string No — Sets the name for the group of Radio controls.
onChange (event: Event, value: string) => void No — Callback invoked when the selected Radio changes. Receives the native Event and the newly selected value.
value string No — Controls the currently selected Radio value.

Radio

The Radio component provides an individual selectable option and can be used independently or as a child of RadioGroup.

When a Radio is wrapped inside a RadioGroup, its checked state is determined by the group’s selected value.

Prop Type Required Default Description
class string No — Additional CSS classes applied to the Radio.
checked boolean No false Controls whether the Radio is selected when it is used independently. When used inside a RadioGroup, the checked state is determined by the group’s selected value.
color "default" | "success" | "warning" | "info" | "error" No "default" Controls the semantic color and styling of the Radio.
defaultChecked boolean No false Controls the initial selected state of the Radio when it is used independently. When used inside a RadioGroup, the initial selected state is determined by the group’s selected value.
disabled boolean No false Prevents the Radio from being selected or interacted with.
id string No — Sets the id attribute of the Radio.
name string No — Sets the name of the Radio control. When used inside a RadioGroup, the group’s name can be used for the group.
onChange (event: Event) => void No — Callback invoked when the Radio’s checked state changes.
size "small" | "medium" | "large" No "medium" Controls the visual size of the Radio.
slotProps { base?: object } No — Provides props for customizing the RadioGroup slots.
  • base — Props for the base slot.
value string No — The value represented by the Radio. When used inside a RadioGroup, the group uses this value to determine the selected Radio.
  • Checkbox — Use Checkbox when users can select multiple independent options.
  • Switch — Use Switch for toggling a setting or boolean state.