The RadioButton component provides a circular single-selection control used within mutually exclusive option groups. Nettalco Theme mirrors the Checkbox token structure — defining circle dimensions, background and border colors for each interactive state, focus ring tokens, and a dedicated icon section for the inner selection dot.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/Nettalco/nettalco-theme/llms.txt
Use this file to discover all available pages before exploring further.
Usage
Design Tokens
Root (circle)
| Token | Value | Description |
|---|---|---|
width | 1.25rem | Default circle width |
height | 1.25rem | Default circle height |
background | {form.field.background} | Unselected background |
checkedBackground | {primary.color} | Background when selected |
checkedHoverBackground | {primary.hover.color} | Background when selected + hovered |
disabledBackground | {form.field.disabled.background} | Background when disabled |
filledBackground | {form.field.filled.background} | Background in filled variant mode |
borderColor | {form.field.border.color} | Default border color |
hoverBorderColor | {form.field.hover.border.color} | Border on hover (unselected) |
focusBorderColor | {form.field.border.color} | Border on focus (unselected) |
checkedBorderColor | {primary.color} | Border when selected |
checkedHoverBorderColor | {primary.hover.color} | Border when selected + hovered |
checkedFocusBorderColor | {primary.color} | Border when selected + focused |
checkedDisabledBorderColor | {form.field.border.color} | Border when selected + disabled |
invalidBorderColor | {form.field.invalid.border.color} | Border in invalid state |
shadow | {form.field.shadow} | Box shadow |
focusRing.width | {focus.ring.width} | Focus ring width |
focusRing.style | {focus.ring.style} | Focus ring style |
focusRing.color | {focus.ring.color} | Focus ring color |
focusRing.offset | {focus.ring.offset} | Focus ring offset |
focusRing.shadow | {focus.ring.shadow} | Focus ring shadow |
transitionDuration | {form.field.transition.duration} | Transition duration |
sm.width | 1rem | Circle width in sm variant |
sm.height | 1rem | Circle height in sm variant |
lg.width | 1.5rem | Circle width in lg variant |
lg.height | 1.5rem | Circle height in lg variant |
Icon (selection dot)
| Token | Value | Description |
|---|---|---|
icon.size | 0.75rem | Default inner dot size |
icon.checkedColor | {primary.contrast.color} | Dot color when selected |
icon.checkedHoverColor | {primary.contrast.color} | Dot color when selected + hovered |
icon.disabledColor | {form.field.disabled.color} | Dot color when disabled |
icon.sm.size | 0.5rem | Dot size in sm variant |
icon.lg.size | 1rem | Dot size in lg variant |
Theme Notes
RadioButton and Checkbox share identical token structures for their box/circle root styles. Both use
{primary.color} for the checked state and {primary.contrast.color} for the inner indicator, creating visual consistency between the two selection control types.