Search the design system

Components – legacy

Radio Button Group

Play around with props, edit and copy code.

Branding

Radio button group has support for custom branding.

How to generate and implement new branding

  • Internal use (Trinidad)

    // Less mixins
    .form-toggle-my-brand {
    .form-toggle-create-branding(...)
    }
    
    Params:
    @default              : Prominent Color
    @default-text         : Prominent Text Color
    @selected             : Base fill color on Selected
    @selected-text        : Text on selected color
    @button-fill          : Button base color
    @disabled-fill        : Disabled base color
    @disabled-text        : Disabled text-color
    @group-border:        : Border around groups
    @group-button:        : Button background in group

Properties

RadioButton

Prop nameTypeDefault ValueDescription
ariaobject
brandingstring
checkedbool
childrennode
classNamestring
dataarray
defaultCheckedbool
disabledbool
idstring
inlinebool
invertedstring
labelstring
labelClassstring
minWidthstring
namestring
onChangefunc
value *union

RadioGroup

Prop nameTypeDefault ValueDescription
childrennode
classNamestring
gapunion
idstring
inlinebool
minWidthstring
multipleLinesbool
sizeunion
thinbool

Accessibility

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines.

Read more about WCAG 2.1 AA.

ComponentsRadio Button Group / Usage
ComponentsRadio pill / Usage

© DesignTech - AB Svenska Spel

What's newTerms of useAccessibility statementCookiesTeams channel [Internal]
@svs/ui version
2.3.0

Feedback

We always want to improve the Design System and would be thrilled to get your feedback.

Please share your wisdom with us.

Microsoft Teams [internal]

Designsystem@svenskaspel.se