DÁP Design System - Radio button webcomponent

Radio button

Radio button is a form element that allows the user to select one option from a set of options. It provides a way to choose between multiple options.

Design system docs

Examples

Default radio button

Radio buttons always have to be used in a group. The group is defined by the dap-ds-radio-group element. The value attribute of the dap-ds-radio-group element defines the selected radio button.

<>
<dap-ds-radio-group
  value="radio-1"
>
  <dap-ds-radio-button
    label="Option 1"
    value="radio-1"
  ></dap-ds-radio-button>

  <dap-ds-radio-button
    label="Option 2"
    value="radio-2"
  ></dap-ds-radio-button>
</dap-ds-radio-group>
<br/>
Pure css Radio button:
<br/>
<dap-ds-stack>
  <label className="dds-choice-wrap">
    <input type="radio" name="radio-1" value="radio-1" className="dds-radiobutton" />
    <div className="dds-choice-label-container">
      Pure css Option 1
    </div>
  </label>
  <label className="dds-choice-wrap">
    <input type="radio" name="radio-1" value="radio-2" className="dds-radiobutton" />
    <div className="dds-choice-label-container">
      Pure css Option 2
    </div>
  </label>
</dap-ds-stack>
</>

Sizes

The radio button component comes in two sizes: small, and large. The default size is small.

<dap-ds-stack direction="row" spacing="1200">
<dap-ds-stack>
  <dap-ds-radio-group
    value="radio-1"
    size="xs"
    feedback="Please select an option"
    feedbackType="negative"
  >
    <dap-ds-radio-button
      label="XS Option 1"
      description="Description"
      value="radio-1"
    ></dap-ds-radio-button>

    <dap-ds-radio-button
      label="XS Option 2"
      description="Description"
      value="radio-2"
  ></dap-ds-radio-button>
  </dap-ds-radio-group>
  <dap-ds-radio-group
    value="radio-1"
    feedback="Please select an option"
    feedbackType="negative"
  >
    <dap-ds-radio-button
      label="SM Option 1"
      description="Description"
      value="radio-1"
    ></dap-ds-radio-button>

    <dap-ds-radio-button
      label="SM Option 2"
      description="Description"
      value="radio-2"
    ></dap-ds-radio-button>
  </dap-ds-radio-group>

  <dap-ds-radio-group
    value="radio-1"
    size="lg"
    feedback="Please select an option"
    feedbackType="negative"
  >
    <dap-ds-radio-button
      label="LG Option 1"
      description="Description"
      value="radio-1"
    ></dap-ds-radio-button>

    <dap-ds-radio-button
      label="LG Option 2"
      description="Description"
      value="radio-2"
    ></dap-ds-radio-button>
  </dap-ds-radio-group>
</dap-ds-stack>
<dap-ds-stack>
  <dap-ds-stack spacing="300">
    <label className="dds-choice-wrap dds-choice-wrap--xs">
      <input type="radio" name="radio-2" value="radio-1" className="dds-radiobutton"/>
      <div className="dds-choice-label-container">
        <span className="dds-label dds-label--subtle">Pure xs Option 1</span>
        <span className="dds-typography dds-typography-description">
          Description
        </span>
      </div>
    </label>
    <label className="dds-choice-wrap dds-choice-wrap--xs">
      <input type="radio" name="radio-2" value="radio-2" className="dds-radiobutton" />
      <div className="dds-choice-label-container">
        <span className="dds-label dds-label--subtle">Pure xs Option 1</span>
        <span className="dds-typography dds-typography-description">
          Description
        </span>
      </div>
    </label>
    <div className="dds-feedback dds-feedback--negative dds-feedback--xs">
      <dap-ds-icon class="feedback__icon" size="xs" name="information-fill">
      </dap-ds-icon>
      Please select an option
    </div>
  </dap-ds-stack>

  <dap-ds-stack spacing="300">
    <label className="dds-choice-wrap dds-choice-wrap--sm">
      <input type="radio" name="radio-3" value="radio-1" className="dds-radiobutton"/>
      <div className="dds-choice-label-container">
        <span className="dds-label dds-label--subtle">Pure xs Option 1</span>
        <span className="dds-typography dds-typography-description">
          Description
        </span>
      </div>
    </label>
    <label className="dds-choice-wrap dds-choice-wrap--sm">
      <input type="radio" name="radio-3" value="radio-2" className="dds-radiobutton" />
      <div className="dds-choice-label-container">
        <span className="dds-label dds-label--subtle">Pure xs Option 1</span>
        <span className="dds-typography dds-typography-description">
          Description
        </span>
      </div>
    </label>
    <div className="dds-feedback dds-feedback--negative dds-feedback--sm">
      <dap-ds-icon class="feedback__icon" size="sm" name="information-fill">
      </dap-ds-icon>
      Please select an option
    </div>
  </dap-ds-stack>

  <dap-ds-stack spacing="300">
    <label className="dds-choice-wrap dds-choice-wrap--lg">
      <input type="radio" name="radio-4" value="radio-1" className="dds-radiobutton"/>
      <div className="dds-choice-label-container">
        <span className="dds-label dds-label--subtle">Pure xs Option 1</span>
        <span className="dds-typography dds-typography-description">
          Description
        </span>
      </div>
    </label>
    <label className="dds-choice-wrap dds-choice-wrap--lg">
      <input type="radio" name="radio-4" value="radio-2" className="dds-radiobutton" />
      <div className="dds-choice-label-container">
        <span className="dds-label dds-label--subtle">Pure xs Option 1</span>
        <span className="dds-typography dds-typography-description">
          Description
        </span>
      </div>
    </label>
    <div className="dds-feedback dds-feedback--negative dds-feedback--lg">
      <dap-ds-icon class="feedback__icon" size="lg" name="information-fill">
      </dap-ds-icon>
      Please select an option
    </div>
  </dap-ds-stack>
</dap-ds-stack>
</dap-ds-stack>

Secondary text

The radio button component comes with a secondary text. The secondary text is used to give more information about the radio button.

<dap-ds-stack direction="column">
  <dap-ds-radio-group
    value="radio-1"
  >
    <dap-ds-radio-button
      label="Option 1"
      description="Description bottom, aligned to the right"
      value="radio-1"
    ></dap-ds-radio-button>

    <dap-ds-radio-button
      label="Option 2"
      description="Description top, aligned to the right"
      descriptionPlacement="top"
      value="radio-2"
    ></dap-ds-radio-button>

    <dap-ds-radio-button
      label="Option 3"
      description="Description bottom, aligned to the left"
      labelPlacement="left"
      value="radio-3"
    ></dap-ds-radio-button>

    <dap-ds-radio-button
      label="Option 4"
      description="Description top, aligned to the left"
      descriptionPlacement="top"
      labelPlacement="left"
      value="radio-4"
    ></dap-ds-radio-button>
  </dap-ds-radio-group>
</dap-ds-stack>

Statuses

The radio button component can have different statuses.

<dap-ds-stack direction="row" spacing="1200">
<dap-ds-stack>
  <dap-ds-radio-group
    value="radio-2"
  >
    <dap-ds-radio-button
      label="Disabled"
      disabled
      value="radio-1"
    ></dap-ds-radio-button>

    <dap-ds-radio-button
      label="Checked"
      checked
      value="radio-2"
    ></dap-ds-radio-button>

    <dap-ds-radio-button
      label="Invalid"
      invalid
      value="radio-4"
      feedback="wrong option"
      feedbackType="negative"
    ></dap-ds-radio-button>
  </dap-ds-radio-group>
</dap-ds-stack>
<dap-ds-stack>
  <label className="dds-choice-wrap">
    <input type="radio" name="radio-5" value="radio-1" className="dds-radiobutton" disabled/>
    <div className="dds-choice-label-container">
      <span className="dds-label dds-label--subtle">Pure disabled</span>
    </div>
  </label>
  <label className="dds-choice-wrap">
    <input type="radio" name="radio-5" value="radio-2" className="dds-radiobutton" checked/>
    <div className="dds-choice-label-container">
      <span className="dds-label dds-label--subtle">Pure checked</span>
    </div>
  </label>
  <label className="dds-choice-wrap">
    <input type="radio" name="radio-5" value="radio-2" className="dds-radiobutton dds-radiobutton--invalid" />
    <div className="dds-choice-label-container">
      <span className="dds-label dds-label--subtle">Pure invlaid</span>
    </div>
  </label>
</dap-ds-stack>
</dap-ds-stack>

Radio button group

The radio button component can be used in a group. The group is defined by the dap-ds-radio-group element. The value attribute of the dap-ds-radio-group element defines the selected radio button. Like any other form element, the radio button group can be used in a form and it has all the form element attributes.

<dap-ds-radio-group
  label="Radio group"
  description="Description"
  required
  feedback="Please select an option"
  feedbackType="negative"
  value="radio-1"
>
  <dap-ds-radio-button
    label="Option 1"
    value="radio-1"
  ></dap-ds-radio-button>

  <dap-ds-radio-button
    label="Option 2"
    value="radio-2"
  ></dap-ds-radio-button>
</dap-ds-radio-group>

Background

The radio button component can have default background. You can use it with the type="background" attribute.

<div style={{ backgroundColor: "#e9edf2", padding: "16px" }}>
  <dap-ds-radio-group
    label="Radio group"
    description="Description"
    required
    feedback="Please select an option"
    feedbackType="negative"
    value="radio-1"
  >
    <dap-ds-radio-button
      label="Option 1"
      value="radio-1"
      type="background"
    ></dap-ds-radio-button>

    <dap-ds-radio-button
      label="Option 2"
      value="radio-2"
      type="background"
    ></dap-ds-radio-button>
  </dap-ds-radio-group>
</div>

Border

The radio button component can have border with border property.

<div style={{ backgroundColor: "#e9edf2", padding: "16px" }}>
  <dap-ds-radio-group
    label="Radio group"
    description="Description"
    required
    feedback="Please select an option"
    feedbackType="negative"
    value="radio-1"
  >
    <dap-ds-radio-button
      label="Option 1"
      value="radio-1"
      type="background"
      border
    ></dap-ds-radio-button>

    <dap-ds-radio-button
      label="Option 2"
      value="radio-2"
      type="background"
      border
    ></dap-ds-radio-button>
  </dap-ds-radio-group>
</div>

Importing

import { DapDSRadioButton } from 'dap-design-system/dist/dds'

Importing React

import { DapDSRadioButtonReact } from 'dap-design-system/dist/react'

Attributes

Property	Type	Default	Description
`focusable`	`boolean`	`false`	Whether the radio button is focusable
`type`	`'normal'`, `'background'`	`'normal'`	The type of the radio button
`border`	`boolean`	`false`	This sets up a border around the radio button, when true.
`name`	`string`		The name of the radio button.
`value`	`string`		The value of the radio button.
`checked`	`boolean`		The checked state of the radio button.
`label`	`string`		The label of the radio button.
`description`	`string`		The description of the radio button.
`size`	`'xs','sm'` , `'md'` , `'lg'`		The size of the radio button.
`disabled`	`boolean`		The disabled state of the radio button.
`required`	`boolean`		The required state of the radio button.
`labelPlacement`	`'left'`, `'right'`		The placement of the label.
`descriptionPlacement`	`'top'`, `'bottom'`		The placement of the description.

Slots

No slots available.

Events

Event Name	Description
`dds-change`	Fired when the radio button is checked.
`dds-blur`	Emitted when the radio button loses focus.
`dds-focus`	Emitted when the radio button gains focus.
`dds-input`	Emitted when the radio button receives input.

CSS Parts

Part Name	Description
`base`	The main radio button container.
`wrapper`	The wrapper of the radio button.
`baselabel`	The main label container
`label`	The label of the radio button.
`input`	The native input of the radio button.
`control`	The control of the radio button.
`description`	The description of the radio button.

CSS Custom Properties

Property Name	Description
`--dds-radio-size`	Sets the size of the radio button. Default: var(--dds-spacing-600)
`--dds-radio-border-width`	Sets the border width of the radio button. Default: var(--dds-border-width-large)
`--dds-radio-border-radius`	Sets the border radius of the radio button. Default: var(--dds-radius-rounded)
`--dds-radio-border-color`	Sets the border color of the radio button. Default: var(--dds-border-neutral-base)
`--dds-radio-background-color`	Sets the background color of the radio button. Default: var(--dds-background-neutral-base)
`--dds-radio-hover-border-color`	Sets the border color of the radio button on hover. Default: var(--dds-border-neutral-medium)
`--dds-radio-hover-background-color`	Sets the background color of the radio button on hover. Default: var(--dds-background-neutral-medium)
`--dds-radio-active-border-color`	Sets the border color of the radio button when active. Default: var(--dds-border-neutral-strong)
`--dds-radio-active-background-color`	Sets the background color of the radio button when active. Default: var(--dds-background-neutral-strong)
`--dds-radio-checked-background-color`	Sets the background color of the checked radio button. Default: var(--dds-background-brand-base-inverted)
`--dds-radio-checked-hover-background-color`	Sets the background color of the checked radio button on hover. Default: var(--dds-background-brand-medium-inverted)
`--dds-radio-checked-active-background-color`	Sets the background color of the checked radio button when active. Default: var(--dds-background-brand-strong-inverted)
`--dds-radio-disabled-background-color`	Sets the background color of the disabled radio button. Default: var(--dds-background-neutral-disabled)
`--dds-radio-icon-background-color`	Sets the background color of the radio button icon. Default: var(--dds-transparent-white-strong-static)
`--dds-radio-disabled-icon-background-color`	Sets the background color of the disabled radio button icon. Default: var(--dds-background-neutral-stronger)
`--dds-radio-invalid-border-color`	Sets the border color of the invalid radio button. Default: var(--dds-border-negative-base)
`--dds-radio-invalid-background-color`	Sets the background color of the invalid radio button. Default: var(--dds-background-negative-base)
`--dds-radio-invalid-hover-border-color`	Sets the border color of the invalid radio button on hover. Default: var(--dds-border-negative-medium)
`--dds-radio-invalid-hover-background-color`	Sets the background color of the invalid radio button on hover. Default: var(--dds-background-negative-medium)
`--dds-radio-invalid-active-border-color`	Sets the border color of the invalid radio button when active. Default: var(--dds-border-negative-strong)
`--dds-radio-invalid-active-background-color`	Sets the background color of the invalid radio button when active. Default: var(--dds-background-negative-strong)
`--dds-radio-invalid-checked-background-color`	Sets the background color of the invalid checked radio button. Default: var(--dds-background-negative-base-inverted)
`--dds-radio-invalid-checked-hover-background-color`	Sets the background color of the invalid checked radio button on hover. Default: var(--dds-background-negative-medium-inverted)
`--dds-radio-invalid-checked-active-background-color`	Sets the background color of the invalid checked radio button when active. Default: var(--dds-background-negative-strong-inverted)
`--dds-radio-icon-size`	Sets the size of the radio button icon. Default: var(--dds-spacing-300)

Components

Radio group

<dap-ds-radio-group/>

Attributes

Property	Type	Default	Description
`tooltipPlacement`	`'top'`, `'right'` , `'bottom'` , `'left'`	`'bottom'`	The tooltip placement of the radio group.
`hiddenInput`	`HTMLInputElement`
`optionalLabel`	`string`	`''`	Text of optional label.
`name`	`string`		The name of the radio group.
`value`	`string`		The value of the radio group.
`disabled`	`boolean`		Whether the radio group is disabled.
`required`	`boolean`		Whether the radio group is required.
`label`	`string`		The label of the radio group.
`description`	`string`		The description of the radio group.
`tooltip`	`string`		The tooltip of the radio group.
`feedback`	`string`		The feedback of the radio group.
`feedbackType`	`'negative'`, `'positive'` , `'warning'`		The feedback type of the radio group. Can be `negative`, `positive`, or `warning`.
`optional`	`boolean`		The optional state of the radio group.
`subtle`	`boolean`		Font weight of the feedback label. Default is `false` which is bold.
`size`	`'xs'`, `'sm'` , `'lg'`		The size of the radio group. Default is `sm`.

Slots

Name	Description
`(default)`	The content of the radio group.
`feedback-icon`	The custom icon of the feedback.

Events

Event Name	Description
`dds-change`	Fired when the radio group is checked.
`dds-blur`	Emitted when the radio group loses focus.
`dds-focus`	Emitted when the radio group gains focus.

CSS Parts

Part Name	Description
`base`	The main radio group container.
`label`	The label of the radio group.
`tooltip`	The tooltip of the radio group.
`container`	The container of the radio group items.

CSS Custom Properties

No CSS custom properties available.