Angular Radio buttons

Angular Radio Button - Bootstrap 4 & Material Design

Angular Radio button is a component used for allowing a user to make a single choice among many options, while Checkboxes are for selecting multiple options.


Default radio buttons

Default styling for Bootstrap radio button component

Material radio buttons MDB Pro component

Material Design styling for Bootstrap radio button component


Checked state

Add checked attribute to the <input> element yo pre-select radio button when the page loads.

The checked attribute is a boolean attribute.

Default checkbox

Material checkbox MDB Pro component


Disabled state

Add the disabled boolean attribute to the <input> and the custom indicator and label description will be automatically styled and blocked.

A disabled <input> element is unusable and un-clickable.

Default radio buttons

Material checkbox MDB Pro component

To provide a proper cursor styling for material radio button, apart from disabled attribute you’ll also need to add the .disabled class to the <label> element.


Inline

Default radio buttons

Group default radio buttons or checkboxes on the same horizontal row by adding .custom-control-inline class to any parent element of the <input> element.

Material radio buttons MDB Pro component

Group material radio buttons or checkboxes on the same horizontal row by adding .form-check-inline class to any parent element of the <input> element.