Radio input 2.0 update #2936
Description
Radio Component Style & Token Update Spec
1. Props & Variants Overview
| Prop / Variant | New? | Notes |
|---|---|---|
compact variant (radio-group) |
✅ | New variant on radio-group, inherited by all child radio-items |
disabled |
❌ | Behavior unchanged, visual style refined |
error |
❌ | Visual style updated with refined error colors |
selected/checked |
❌ | Visual style updated with refined selection colors |
state variations |
❌ | Hover, focus, disabled states refined |
2. Style + Token Comparison Table
| Token / Raw Style | CSS Property | Variant / State | Current Value | New Value | Status | Notes |
|---|---|---|---|---|---|---|
--goa-radio-group-gap-vertical |
gap |
Default vertical | {space.m} (16px) |
{space.m} (16px) |
Unchanged | Vertical spacing between radio items |
--goa-radio-group-gap-horizontal |
gap |
Default horizontal | {space.l} (24px) |
{space.xl} (32px) |
Updated | Increased horizontal spacing |
--goa-radio-group-gap-vertical-compact |
gap |
Compact vertical | {space.s} (12px) |
{space.s} (12px) |
Unchanged | Existing compact vertical spacing |
--goa-radio-group-gap-horizontal-compact |
gap |
Compact horizontal | {space.l} (24px) |
{space.l} (24px) |
Unchanged | Existing compact horizontal spacing |
--goa-radio-size |
width/height |
Default | {space.l} (24px) |
{space.l} (24px) |
Unchanged | Radio button circle size |
| Radio circle gap | gap |
Default | {space.xs} (8px) |
{space.s} (12px) |
Updated | Gap between radio circle and label |
| Radio circle gap | gap |
Compact | (none) | {space.xs} (8px) |
New token needed | Smaller gap for compact variant |
radio-border |
border-width |
Default | {borderWidth.s} (1px) |
1.5px |
Updated | Increased border width to 1.5px |
radio-border-focus |
outline-width |
Focus | {borderWidth.l} (3px) |
2px |
Updated | Focus outline width reduced to 2px |
radio-border-focus |
outline-color |
Focus | {color.interactive.focus} |
#006dcc |
Updated | Updated focus color (use outline, not border) |
radio-border |
border-color |
Default | {color.greyscale.700} |
#797676 |
Updated | Update existing token value |
radio-border-hover |
border-color |
Hover | {color.interactive.hover} |
#000000 |
Updated | Update existing token value |
radio-border-checked |
border-color |
Checked | {color.interactive.default} |
#006dcc |
Updated | Update existing token value |
radio-border-checked-hover |
border-color |
Checked+Hover | {color.interactive.hover} |
#045092 |
Updated | Update existing token value |
radio-label-color-disabled |
color |
Disabled | {color.greyscale.500} |
#bab7b7 |
Updated | Update existing token value |
radio-border-error |
border-color |
Error | {color.interactive.error} |
#da291c |
Updated | Update existing token value |
radio-border-error-hover |
border-color |
Error+Hover | {color.interactive.error-hover} |
#a91a10 |
Updated | Update existing token value |
3. New Tokens to Add
| Token Name | Value | Description |
|---|---|---|
--goa-radio-gap-compact |
{space.xs} (8px) |
Gap between radio circle and label in compact variant (only new token needed) |
4. Deprecated / No Longer Used Tokens
| Token Name | Last Used In | Notes |
|---|---|---|
| None identified | N/A | All existing tokens will be updated rather than deprecated |
5. Implementation Notes
- The
compactvariant is set on radio-group and inherited by all child radio-items - Border widths updated: default radio circle uses 1.5px border (was 1px), focus outline uses 2px (was 3px)
- Focus rings use
outlineproperty, notborder- update existing pattern with new color values - Error message positioning handled by separate
form-itemcomponent (not part of this update) - Update existing token values rather than creating new tokens
- Component structure remains unchanged - only CSS custom properties need updates
- All color and spacing refinements improve accessibility and visual hierarchy
6. ✅ Clarified Responses
| Topic | Clarified Response |
|---|---|
| Compact variant implementation | Set compact once on the radio-group, and all child radio-items inherit it. No need to set on individual items. |
| Border width changes | Yes, intentional. Default radio circle: 1.5px border, focus ring: 2px border. Standard border width is 1.5px (except focus). |
| Error message positioning | Error messages handled by separate form-item component. Focus only on updating radio-group and radio-item. |
| Focus ring implementation | Use outline property, not border. Follow current implementation pattern and update only style values. |
| Color token naming | Update existing token values to match new design. Only create new tokens for styles/variants that didn't previously exist. |
Additional Context
Current Implementation Files Analyzed:
- Global tokens:
/design-tokens/data/goa-global-design-tokens.json - Component tokens:
/design-tokens/data/component-design-tokens/radio-design-tokens.json - RadioGroup component:
/ui-components/libs/web-components/src/components/radio-group/RadioGroup.svelte - RadioItem component:
/ui-components/libs/web-components/src/components/radio-item/RadioItem.svelte
Figma Designs Analyzed:
- Radio option component:
https://www.figma.com/design/Kkd4vrWhbQ9Oqv0WufXbXC/v2.0?node-id=458-15978 - Radio group component:
https://www.figma.com/design/Kkd4vrWhbQ9Oqv0WufXbXC/v2.0?node-id=12705-381223
Key Changes Summary:
- Introduction of compact variant for radio groups
- Refined color palette for better accessibility and visual hierarchy
- Updated spacing values for improved visual balance
- Enhanced focus and interaction states
- Backward compatibility maintained throughout