Skip to main content
Neural UIv2.0.0Documentation
View v1 GitHub

Radio

Represent one choice within an accessible RadioGroup.

Category
Forms and selection
Import
@neural-ui/core/radio
Selector
neu-radio
import { NeuRadioComponent } from '@neural-ui/core/radio';

Usage

Radio supplies the value and label of one option. Place it inside RadioGroup: the group owns the selected value, form binding and keyboard behavior.

Radio itself has no value model or outputs. Its value is an input describing this option, not the current group selection. Use the group's valueChange to observe selection changes.

Signal Forms

Bind FormField to the value-owning control and add required to the form schema. Select a destination, leave the field to mark it touched, and reset it to check both value and validation state. A required marker on its own does not validate your form.

Signal Forms guide

Signal Forms

Value: — · Valid: false

Try and configure

Change the settings below and interact with the live control. The preview, current application value and generated template stay together. A disabled destination lets you check that unavailable choices cannot be selected.

Try and configure
Live preview

Radio represents one option. Its group owns the selected value and keyboard navigation.

Generated template: reflects the settings above. Imports and state are in the Code tab.

template.html
<neu-radio-group
  [(value)]="destination"
  [ariaLabel]="label"
  direction="column"
>
  <neu-radio value="madrid" label="Madrid" />
  <neu-radio value="lisbon" label="Lisbon" />
  <neu-radio value="paris" label="Paris" />
  <neu-radio value="rome" label="Rome" [disabled]="true" />
</neu-radio-group>

Value and events

Radio supplies the value and label of one option. Place it inside RadioGroup: the group owns the selected value, form binding and keyboard behavior.

Radio itself has no value model or outputs. Its value is an input describing this option, not the current group selection. Use the group's valueChange to observe selection changes.

Accessibility and keyboard

Give the group an accessible name and each Radio a visible label. Test with Tab, arrow keys and Space. Keep option values distinct and avoid placing extra interactive controls inside a radio label.

Key
Action
Tab Enters and leaves the radio group.
Arrow keys Moves between enabled radio options.
Space Selects the focused option when interaction is allowed.

API

The reference lists the public Inputs, models, Outputs and Templates from the pinned Core package. Click a named type to open its definition. Each applicable Template has an executable example and its actual source.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name
Type
Default
Template binding
Description
disabledbooleanfalse[disabled]Disables user interaction; disabled options cannot be selected.
inputIdstringinject(NeuIdGenerator).getId('neu-radio-')Derived default[inputId]Identifier of the native input for label and accessibility associations.
labelstring''[label]Visible label of this radio option.
valueVRequired[value]Option value selected by the surrounding RadioGroup.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

This component does not expose content projection or public customization templates.

Styles and tokens

Load Core styles once. Use the public tokens below for local customization or a preset for application-wide changes. Keep labels, focus, selected options and disabled states readable in both light and dark themes.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token
Purpose here
Other impact
Default / fallback
--neu-border-hover Control borders on hover Shared by other Core consumers; scope the override. rgba(15, 23, 42, 0.16)
--neu-primary Brand color for active controls and emphasis Shared by other Core consumers; scope the override. #007aff
--neu-surface Main field, header or control surface Shared by other Core consumers; scope the override. #ffffff
--neu-text Main text and inherited icon color Shared by other Core consumers; scope the override. #0f172a
--neu-font-sans Text typography Shared by other Core consumers; scope the override. 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif
--neu-radius-full Corner radius Shared by other Core consumers; scope the override. 9999px
--neu-space-3 Spacing between content and controls Shared by other Core consumers; scope the override. 0.75rem
--neu-text-sm Text size Shared by other Core consumers; scope the override. 0.875rem