Radio Button
import "@taprootio/espalier/radio-button";
<esp-radio-button>
A radio button control for choosing one option from a set. Uses Tabler SVG icons for selected and unselected states. Should be used inside an esp-radio-button-group for single-select behavior.
Group name and errors
Inside an esp-form-item, the group's radiogroup takes the form item's
label as its accessible name and its hint as its description, so no
wrapper role="group" or aria-labelledby is needed. While the form item
shows an error, the radiogroup is aria-invalid="true", the error joins
its description after the hint, and the error is announced once. Each
radio button keeps its own label. A choice clears an error set through the
form item's error or errorPool, since a radio choice cannot be undone;
pick an option below to see it.
Slots
<esp-radio-button> has a slot:
Default
The label text for the radio button.
Attributes
<esp-radio-button> has the following attributes:
checked
checked has a default value of false.
Whether the radio button is in the selected state.
value
value has a default value of "".
The value associated with this radio button. Used by esp-radio-button-group to track which option is selected.
disabled
disabled has a default value of false.
Controls whether the radio button is disabled.
surface-layer
surface-layer has a default value of undefined.
Declares the painted surface depth. Fields use the next local layer, capped at layer 4.
intent
intent has a default value of undefined.
The element's intent — its meaning: neutral
(no pin), or success, warning, danger, info — each pinned
to its fixed status family (blue for info), retunable per theme
via intents. On token-emitting controls a non-neutral intent pins the
filled-action pair to that family, derived over the governing
zone's theme; class-styled chrome (badges, callouts, status pills)
opts out of inline emission and renders its treatment from CSS
classes instead. An intent never repaints the surrounding zone,
which is what contexts are for. Removing the attribute restores
the element's own default intent.
context
context has a default value of undefined.
A theme-defined color zone. The selected context rebinds designer-facing roles and emits a complete, contrast-enforced semantic token table on this host for descendants to inherit.
Methods
<esp-radio-button> has the following methods:
focus
Focus the radio button control.
traverseToClosest
Traverse up the DOM tree to find the closest element that matches the selector. This method is aware of shadow DOM boundaries and will traverse through them to find the element.
Events
<esp-radio-button> emits the following events:
esp-value-changed
esp-value-changed is of type CustomEvent<{ checked: boolean; value: string }>.
Fired when the radio button is selected. The detail contains the new checked state and the radio button value.
CSS Properties
<esp-radio-button> has the following CSS properties:
--esp-radio-button-size
The width and height of the radio icon. Defaults to var(--esp-size-normal-to-medium).
--esp-radio-button-icon-color
The stroke color of the radio icon. Defaults to var(--esp-color-text).
--esp-radio-button-focus-shadow
The color of the focus ring shadow. Defaults to var(--esp-color-shadow).
--esp-field-background
Background color of the shared field shell. Defaults to one layer above the nearest declared surface, capped at var(--esp-color-layer-4), or var(--esp-color-layer-2) without a declared surface. An explicit override wins.
--esp-field-border-color
Border color of the shared field shell. Defaults to var(--esp-color-border).
--esp-field-border-width
Border width of the shared field shell. Defaults to 1px.
--esp-field-text-color
Text color used inside the shared field shell. Defaults to var(--esp-color-text).
--esp-field-hover-bg
Hover background color of the shared field shell. Derived from --esp-field-background.
--esp-field-focus-bg
Focus background color of the shared field shell. Derived from --esp-field-background.
--esp-field-focus-shadow
Shadow color used for shared field focus treatment. Defaults to var(--esp-color-shadow).