Skip to main content

Radio

shadow

The radio element is a modified version of the standard HTML radio element, enhanced with styles to achieve a more visually consistent user interface across devices. It works similarly to a standard radio button and allows users to select one from a set of options. It is used inside the radio group element to add alignment and group them together.

Basic usage

Inline

Adding the inline property arranges the elements in a horizontal layout.

Editing styles

color

Using the color property it is possible to change the color of the radio element.

Attributes and Properties

checked

DescriptionIndicates whether the switch is checked.
Attributechecked
Typeboolean
Defaultfalse

disabled

DescriptionIndicates whether the switch is unchecked.
Attributedisabled
Typeboolean
Defaultfalse

color

DescriptionSpecifies the color of the switch.
Attributecolor
Typestring
Defaultundefined

value

DescriptionSwitch value.
Attributevalue
Typestring
Defaultundefined

placement

DescriptionSpecifies the location of the label relative to the switch.
Attributeplacement
Typestring
Defaultstart

Events

NameDescription
wje-radio:changeCalled when the switch state changes.
wje-radio:inputInvoked when interacting with the switch.

Methods

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

NameDescription
--wje-radio-margin-inlineSpecifies the horizontal (left and right) offset for the switch. Accepts any valid CSS length unit (e.g. px, rem, %) to control the spacing on either side of the component.
--wje-radio-margin-topDefines the upper offset for the switch. Accepts any valid CSS length value to set the vertical spacing above the component.
--wje-radio-margin-bottomSets the lower offset for the switch. Accepts any valid CSS length value to set the vertical spacing below the component.

Slots

NameDescription
``The default switch label content slot.