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>

Sizes

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

<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>

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="column">
  <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>

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.

<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>

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
`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.

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.