Radio component

import { DAYRadioGroupComponent, DAYRadioButtonComponent } from '/radio';

Selectors

Radio group: day-radio-group

Radio button: day-radio-button

Installation and Usage

npm install @dayerlin-bustamante/radio

import { DAYRadioGroupComponent, DAYRadioButtonComponent } from '@dayerlin-bustamante/radio';

<day-radio-group>
    <day-radio-button value="1">Option 1</day-radio-button>
</day-radio-group>

Inputs

Radio Button

Name	Description
id: string \| null	Value for input id and label for attribute.
value: any	Radio button input value.
labelPosition: <'before' \| 'after'>	Label position: after or before the input.
isDisabled: boolean	Indicates if the radio button input is disabled.

Radio Group

No inputs included in radio group component.

Output

No outputs are included in the radio group component or the radio button component.

Directives

No directives are included in the radio group component or the radio button component.

Public methods

No public methods are included in the radio group component or the radio button component.

The component <day-radio-group> is a form control that provides the same functionality as a native <input type="radio">, enhanced with Design styling.

Dependencies

'/core'

Example

Html

Demo

First option

Second option

Radio button label

This label must be used with <day-label> component and can be positioned before or after the <input type="radio"> by setting the labelPosition property to 'before' or 'after' in <day-radio-button>.

Radio groups

The <day-radio-group> component is used to group radio buttons together. It allows you to bind the selected value to a model using two-way data binding with [(ngModel)] or by using reactive forms with formControlName. The group manages the state changes for disabled and invalid radio buttons.

Use with @angular/forms

Supports both FormsModule and ReactiveFormsModule.