Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Custom Inputs
Select
Components
Components
78
Micro Charts
Navigation
Libraries
Content Editor
Data View
Form Builder
Image Designer
Kanban Board
PDF Viewer
Video Player
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Buy License

Radio

Radio lets users choose exactly one option from a small visible set of mutually exclusive choices. Use it for simple text options in forms, settings, filters, and preference screens.

Use ngs-radio-group as the group container and ngs-radio-button for each option. Bind the selected value through value, ngModel, or formControlName, and use disabled on the group or on individual options when needed.

Do not use Radio for multiple selection, long option lists, rich card choices, segmented view switching, or boolean toggles. Use Checkbox, Select, Autocomplete, RadioCard, Segmented, ButtonToggle, SlideToggle, or Checkbox instead.

Radio Group

PropTypeDefault
value
Value of the radio group
any
name
Name of the radio group
string
disabled
Whether the radio group is disabled
booleanfalse
orientation
Radio button layout direction. Use vertical for stacked options and horizontal for inline choices.
'horizontal' | 'vertical''horizontal'
EventDescription
changeEvent emitted when the radio group value changes

Radio Button

PropTypeDefault
value
Value of the radio button
any
name
Name of the radio button
string
checked
Whether the radio button is checked
booleanfalse
disabled
Whether the radio button is disabled
booleanfalse
id
Unique id for the radio button
stringngs-radio-button-id
EventDescription
changeEvent emitted when the radio button checked state changes