Introduction

The radio button is a form element in web and application design that allows users to select only one option from a list of choices. It is a fundamental component in designing user interfaces that require users to make choices.

Anatomy

The radio button consists of a small circular button and a label. When the button is selected, it displays a small dot or circle inside it. The label is usually a text that describes the option or action associated with the radio button. The radio button is designed to work with other form elements, such as input fields and buttons, to create a comprehensive user interface.

Usage

The radio button is used to provide users with a list of options, and they can select only one of them. It is typically used in forms, questionnaires, and surveys. The radio button is also used in filters, search options, and settings where users need to select a single choice. When designing with radio buttons, it is important to consider their accessibility, usability, and visual design.

Differences from Other Form Elements

The radio button is often compared to other form elements, such as the toggle button, switch, and checkbox. While they may look similar, they have different functions and usage. The toggle button and switch are used to toggle between two states, usually on/off or true/false. The checkbox allows users to select one or more options from a list of choices. The radio button, on the other hand, allows users to select only one option from a list of choices.

Radio button Sizes

The table below provides the size specifications: | Size | Dimensions | Padding | Outer Circle(In hover and pressed state) | | ------------- | ---------- | -------- | ----------------------------------------- | | Mobile | 16 x 16 px | 2 x 2 px | 36 x 36 px | | Tablet | 18 x 18 px | 2 x 2 px | 38 x 38 px | | Web/Desktop | 20 x 20 px | 2 x 2 px | 40 x 40 px |

Radio button Colors

The table below provides the color specifications: | Color | Hex code | | --------- | -------- | | Primary-1 | #FFB42A | | Neutral-2 | #6C6969 |

Radio button states

The Radio Button component has several states, depending on the user's interaction with it | Color | Description | | -------- | ---------------------------------------------------------------------- | | Default | The initial state of the Radio button component | | Hover | When the user hovers the mouse pointer over the Radio button component | | Pressed | When the user clicks on the Radio button component | | Disabled | When the Radio button is not available for interaction |

indreka-radio-button Component

The <indreka-radio-button></indreka-ratio-button> component having the following property:

1. name having type of string.
2. value having type of string.
3. label having type of string.
4. checked having type of boolean.
5. disabled having type of boolean.
6. hovered having type of boolean.
7. controlValue having type of string.

Use

<indreka-radio-button></indreka-radio-button>

We can pass attributes inside like:

1. name <indreka-radio-button name="name"></indreka-radio-button>

-- This is the name of the radio button which stores the name, this will stay same for a group of radio buttons.

2. value <indreka-radio-button value="nameValue"></indreka-radio-button>

-- This is the value of the radio button, this should always be different.

3. checked <indreka-radio-button checked></indreka-radio-button>

-- This will set the checkbox checked by default.

4. disabled <indreka-radio-button disabled></indreka-radio-button>

-- This will disable the button preventing the user to perform any mouse events on button and also update the aria-disabled.

5. required <indreka-radio-button required></indreka-radio-button>

-- This will set radio button field is required

Angular Use

We are using custom events for values. so, need to be implemented in the HTML code to get the checkbox values. radioButtonEvent

<indreka-radio-button (radioButtonEvent)="eventHandler($event)" >Text</indreka-radio-button>

--Example html <indreka-radio-button name="vehicle" value="car" (checkboxEvent)="handleRadioButtonEvent($event)" >Text</indreka-radio-button>

ts handleRadioButtonEvent(event: Event) { const customEvent = event as CustomEvent; console.log(customEvent.detail); -- will provide the checked value of Radio button (true/false)

const nameValue = event.target as HTMLInputElement; console.log(nameValue.name); -- will fetch the name used (vehicle) console.log(nameValue.value); -- will fetch the value used (car) }

WhiteLbaeling

The radio button background color can be changed by declaring the variable in the angular as :host{ --accentColor:"colorValue"; --accentWithOpacity5:"colorValue"; --accentWithOpacity12:"colorValue"; }