Radio Button

A single-choice selection control. Two states — Default and Active — with colors and geometry pulled directly from the LUSTER Figma component.

State

Figma Properties
State: Active
Border color: #916DFF
Dot color: #916DFF
Size: 16 × 16px
Border width: 1px

Tip: click the radio to toggle it.

Variant

Default

Active

Design Tokens

Token Name	Figma Variable	Default Value
--radioButtonBorderWidth	RadioButton/Border/Width	1px
--radioButtonDefaultBgColor	RadioButton/Default/Bg/Color	#ACADB2
--radioButtonDefaultBorderColor	RadioButton/Default/Border/Color	#ACADB2
--radioButtonActiveBgColor	RadioButton/Active/Bg/Color	#916DFF
--radioButtonActiveBorderColor	RadioButton/Active/Border/Color	#916DFF

Usage Guidelines

✓ DO

Use radio buttons when only one option in a set can be selected.

✓ DO

Always group related radios with a shared name and a visible label.

✕ DON'T

Don't use a radio group to enable multiple selections — use checkboxes.

✕ DON'T

Don't leave a radio group with no default selection when one is required.

Implementation

Values shown are the Diamond brand, Light mode defaults (the Figma file's default mode). Other brands (Amber, Opal) and Dark mode resolve to different values via the Color Theme & Component Brand collections.

import React from 'react';
import './RadioButton.css';

export interface RadioProps {
  name: string;
  value: string;
  checked: boolean;
  onChange: (value: string) => void;
  label?: string;
}

export const RadioButton = ({ name, value, checked, onChange, label }: RadioProps) => (
  <label className="radio-field">
    <input
      type="radio"
      name={name}
      value={value}
      checked={checked}
      onChange={() => onChange(value)}
      className="radio-input"
    />
    <span className="radio"><span className="radio__dot" /></span>
    {label && <span>{label}</span>}
  </label>
);

/* Radio Button tokens — generated from LUSTER Figma variables */
:root {
  --radioButtonBorderWidth: 1px;
  --radioButtonDefaultBorderColor: #ACADB2;
  --radioButtonDefaultBgColor: #ACADB2;
  --radioButtonActiveBorderColor: #916DFF;
  --radioButtonActiveBgColor: #916DFF;
}

.radio-input { position: absolute; opacity: 0; }
.radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: var(--radioButtonBorderWidth) solid var(--radioButtonDefaultBorderColor);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.radio__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
}
.radio-input:checked + .radio { border-color: var(--radioButtonActiveBorderColor); }
.radio-input:checked + .radio .radio__dot { background: var(--radioButtonActiveBgColor); }

<!-- Default (unselected) -->
<label class="radio-field">
  <input type="radio" name="plan" value="free" class="radio-input">
  <span class="radio"><span class="radio__dot"></span></span> Free
</label>

<!-- Active (selected) -->
<label class="radio-field">
  <input type="radio" name="plan" value="pro" class="radio-input" checked>
  <span class="radio"><span class="radio__dot"></span></span> Pro
</label>

import { useState } from 'react';
import { RadioButton } from '@luster/ui';

export default function PlanPicker() {
  const [plan, setPlan] = useState('pro');
  return (
    <fieldset>
      <RadioButton name="plan" value="free" checked={plan === 'free'} onChange={setPlan} label="Free" />
      <RadioButton name="plan" value="pro"  checked={plan === 'pro'}  onChange={setPlan} label="Pro" />
    </fieldset>
  );
}