@cas-smartdesign/radio-button-group

A radio-button-group and a radio-button element based on lit-element with SmartDesign look & feel.

radio-button-group

Attributes

• layout
  • Defines the layout in which the buttons are placed
  • Possible values: "horizontal", "vertical"
• uncheck-allowed
  • Defines whether if buttons can be deselected explicitly
• disabled
  • Defines whether if the group is disabled

Properties

• layout, uncheckAllowed, disabled
  • Reflects the corresponding attribute
• value
  • Reflects the value of the checked button in the group

Custom events

• value-change: CustomEvent<IValueChangeEvent>
  • This event is dispatched when the value is changed because of a user interaction

Validation

The element could show validation messages via an sd-field-validation-message element which can be configured with the following attributes & properties which are all delegated to that:

• validationMessage
• validationIconSrc
• validationLevel

CSS Custom Properties

• --sd-radio-button-group-gap
  • Defines the gap between the radio buttons in the group.

radio-button

Attributes

• checked
  • Defines whether if the button is checked
• value
  • Defines the value of the button
• focused
  • Defines whether if the button has focus
• disabled
  • Defines whether if the interaction with the button is disabled
• label
  • Defines the text of the label
• oneline: boolean
  • The label of the button may wrap into multiple lines without this option.

Properties

• checked, value, focused, disabled, label, oneline
  • Reflects the corresponding attribute

CSS Custom Properties

• --sd-radio-button-checked-color
  • Defines the color of the inner & outer circle when the button is checked
• --sd-radio-button-highlight-color
  • Defines the color of the circle which is only visible when the button is focused
• --sd-radio-button-unchecked-color
  • Defines the color of the outer circle and the inner circle when the button is unchecked
• --sd-radio-button-font-family
  • Defines the font-family of the radio button
• --sd-radio-button-padding
  • Defines the padding of the radio button. It is a shorthand property, so you can set all four paddings at once. (e.g. 10px 5px)