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
Visual Builder
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.

The NgStarter Angular Radio component lets users choose exactly one option from a small visible set of mutually exclusive choices. Use ngs-radio-group with ngs-radio-button for simple text options in forms, settings, filters, and preference screens where all options should be visible and the user can choose only one. It includes examples for basic radios, radio orientation, and radio cards.

Basic Radios

Use basic radios when all options are short, visible, and the user can choose only one.

Radio Orientation

Use orientation to stack radios vertically or keep short choices inline.

Vertical

Horizontal

Radio Card

Use RadioCard instead of plain Radio when each option needs a richer card with title, icon, and description.

Open
Posts and community members are public and visible to search engines.
Closed
Only members can view community members and posts. Content is not visible to search engines.

Control value: open