Components / Radio Group

Radio Group

Native exclusive choices grouped by a fieldset and visible legend.

Interface density
example.component.html
html
<fieldset aevkoRadioGroup>
  <legend>
    Density
  </legend>
  <label>
    <input aevkoRadioGroupItem type="radio" name="density" value="default" />
    Default
  </label>
  <label>
    <input aevkoRadioGroupItem type="radio" name="density" value="compact" />
    Compact
  </label>
</fieldset>

Installation

npx aevko-ui@latest add radio-group --yes

Source ownership

Customization

Compose native labels and descriptions inside the fieldset, then select horizontal or vertical layout without replacing browser selection behavior.

Edit locallyThe installed template and stylesheet are application code, not a black box.
Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

API reference

Property or slotTypeDefaultDescription
orientation'horizontal' | 'vertical''vertical'Controls the fieldset layout without changing radio semantics.
invalidbooleanfalseExposes group invalid state for styling.
native radio attributesHTMLInputElementbrowser defaultEach item accepts name, value, checked, disabled and Forms bindings.

Accessibility contract

Accessibility

Included behavior

  • Fieldset and legend name the set; native radios provide exclusive selection and arrow-key behavior.

Your responsibility

Provide a visible legend, share one name across choices and ensure one option is selected when the question is required.

Back to all components