Lynx/Modules/HeroUI/Radio
@sigx/lynx-heroui · Beta · Component library

Radio#

A compound radio group for picking a single value from a set of options, with a headless group that drives selection, color, and size for its items.

Import#

TSX 
import { Radio } from '@sigx/lynx-heroui';

Radio is a compound component. The outer Radio is the group; render one Radio.Item per option inside it.

Binding the selected value#

The group is the source of truth. Set the group's value to the currently-selected option and update it in the group's change event handler. Each Radio.Item whose value matches the group's value renders as checked.

TSX 
import { component, render } from '@sigx/lynx';
import { Radio } from '@sigx/lynx-heroui';

const Demo = component(({ signal }) => {
  const state = signal({ plan: 'pro' });

  return () => (
    <Radio
      value={state.plan}
      onChange={(value) => (state.plan = value)}
    >
      <Radio.Item value="free" label="Free" />
      <Radio.Item value="pro" label="Pro" />
      <Radio.Item value="team" label="Team" />
    </Radio>
  );
});

render(<Demo />, '#root');

The group also propagates color and size to every item, so you set them once on the group instead of repeating them per option. A per-item color/size still wins over the group's value.

Props#

Radio (group)#

PropTypeDefaultDescription
valuestring-The currently-selected option's value. Items matching this render checked.
colorRadioColor-Default color for all items in the group.
sizeRadioSize-Default size for all items in the group.
classstring-Additional CSS classes for the group container.

RadioColor is 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' (the shared color scale excluding neutral). RadioSize is 'sm' | 'md' | 'lg'.

Events#

EventTypeDescription
onChange(value: string) => voidFired with the selected item's value when an item is pressed. Use it to update your bound state.

Slot#

SlotDescription
defaultThe Radio.Item children that make up the group.

Radio.Item#

PropTypeDefaultDescription
valuestring-This option's value. Reported to the group's onChange / item's onSelect when pressed. An item without a value is inert.
labelstring-Text shown next to the radio dot.
checkedboolean-Explicit override. When set, it wins over the group's value (fully controlled use).
disabledbooleanfalseDims the item and blocks selection.
colorRadioColorgroup's colorItem color; overrides the group default.
sizeRadioSizegroup's sizeItem size; overrides the group default.
classstring-Additional CSS classes for the item.
accessibility-elementboolean-Marks the item as an accessibility element.
accessibility-labelstring-Accessibility label for screen readers.
accessibility-rolestring-Accessibility role.
accessibility-traitstring-Accessibility trait.
accessibility-statusstring-Accessibility status.

Events#

EventTypeDescription
onSelect(value: string) => voidFired with this item's value when it is pressed, in addition to the group's onChange.

Sizes#

Radio.Item supports three sizes. Set size on the group to apply it to every item.

TSX 
import { component, render } from '@sigx/lynx';
import { Radio } from '@sigx/lynx-heroui';

const Demo = component(({ signal }) => {
  const state = signal({ density: 'md' });

  return () => (
    <Radio
      value={state.density}
      size="lg"
      onChange={(value) => (state.density = value)}
    >
      <Radio.Item value="sm" label="Comfortable" />
      <Radio.Item value="md" label="Cozy" />
      <Radio.Item value="lg" label="Compact" />
    </Radio>
  );
});

render(<Demo />, '#root');

Colors and disabled items#

Use the group's color for the default, override it per item with color, and mark options unavailable with disabled.

TSX 
import { component, render } from '@sigx/lynx';
import { Radio } from '@sigx/lynx-heroui';

const Demo = component(({ signal }) => {
  const state = signal({ tier: 'standard' });

  return () => (
    <Radio
      value={state.tier}
      color="primary"
      onChange={(value) => (state.tier = value)}
    >
      <Radio.Item value="standard" label="Standard" />
      <Radio.Item value="premium" label="Premium" color="success" />
      <Radio.Item value="enterprise" label="Enterprise (contact sales)" disabled />
    </Radio>
  );
});

render(<Demo />, '#root');