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