Radio buttons allow users to select one option from a set of mutually exclusive choices. They're ideal for forms where users must make a single choice; they're easily navigable via mouse or keyboard and are screen-reader friendly with proper labeling.
Installation
Follow these steps to install and use the ip-radio component in your project.
Step 1
Install the ip-radio component as a dependency in the project:
npm install ip-radio
Step 2
Import the module into your script file:
Usage
To use this component, add the properties as attributes.
Properties
| Property | Attribute | Necessity | Description | Type | Default |
|---|
| options | options | Required | This is a stringifird JSON array of radio options | string | Undefined |
| labelPosition | label-position | Optional | To determine where the label of the radio button will be positioned. | before | after | after |
| defaultOptionId | default-option-id | Optional | If we need to set an option checked as default | string | nombre | Undefined |
Options
This is a stringified JSON arary of option. Each option is an object with an id, a label, and an optional disabledproperty.
- id: this is the id of the input.
- label: this is the label for radio option.
- disabled: when we need to set the option to disable, this is boolean and as default it's false
Example
Customization
The elements are encapsulated in a fieldset.
We have a set of predefined variable used to customisation the radio-button:
- --primary-color
- --secondary-color
- --radio-size
- --fieldset-border
To update the values use the following:
Listening to Events
- selectionChanged: This event is emitted when a radio button The event detail is the selected option.
Example
