Radio

Radio component allows to use forms input typed to radio element.

Quick demo

Preview of the radio component.

Go on interactive demo for look this component in action!

Usage

Styles

sass
@use "~@iraiser/biscuit-design-components/components/radio/styles";

JavaScript

javascript
import { BDCRadio } from '@iraiser/biscuit-design-components/components/radio';

let radio = new BDCRadio(document.querySelector('.bdc-radio'));

HTML structure

html
<div class="bdc-radio">
    <input class="bdc-radio__input" type="radio">

    <div class="bdc-radio__control">
        <span class="bdc-radio__circle"></span>
    </div>

    <div class="bdc-radio__whisper"></div>
</div>

Theming

See the "Theming" section on theme documentation for more customization options.

Theming with CSS custom properties

Set custom styles on specific element in component:

sass
@use "~@iraiser/biscuit-design-components/components/radio";

.foo-radio {
    --bdc-theme-primary: #0971b3;
}

Theming with Sass mixins

Set custom styles on specific element in component:

sass
@use "~@iraiser/biscuit-design-components/components/radio";

.foo-radio {
    @include radio.ink-color(#0971b3);
}

See Sass mixins section for more options.

Style customization

CSS classes

CSS ClassDescription
bdc-radioMandatory.
bdc-radio--focusedStyle radio at focused status.
bdc-radio--requiredStyle radio at required status.
bdc-radio--invalidStyle radio at invalid status.
bdc-radio--disabledStyle radio at disabled status.
bdc-radio__inputIndicates the native input container.
bdc-radio__controlIndicates the control container.
bdc-radio__circleIndicates the dot container.

Sass mixins

Custom your own radio easily with the public Sass mixins.

MixinDescription
unchecked-colors($stroke-color, $fill-color)Set the colors when element is not checked.
checked-colors($stroke-color, $fill-color)Set the colors when element is checked.
ink-color($color)Set the circle color when element is checked.
focused-color($color)Set the color when element is focused.

JavaScript API

Getters & Setters

Public accessors from BDCRadio class.

AccessorTypeDescription
valuestringMethod for get & set the value.
checkedbooleanMethod for get & set the checked status.
validbooleanMethod for get & set the valid status.
requiredbooleanMethod for get & set the required status.
disabledbooleanMethod for get & set the disabled status.
Menu