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-radio-group value="radio-1">
    <dap-ds-radio-button
      label="SM Option 1"
      value="radio-1"
    ></dap-ds-radio-button>

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

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

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

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>

Importing

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

Importing React

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

Slots

No slots available.

Attributes

Property	Type	Description
`size`	`'sm' 'md' 'lg'`	The size of the radio button. Default is `md`. Can be `sm`, `md`, or `lg`.
`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.
`disabled`	`boolean`	The disabled state of the radio button.
`required`	`boolean`	The required state of the radio button.
`label`	`string`	The label of the radio button.
`description`	`string`	The description of the radio button.
`labelPlacement`	`'left' 'right'`	The placement of the label. Can be `left` or `right`. Default is `right`.
`descriptionPlacement`	`'top' 'bottom'`	The placement of the description. Can be `top` or `bottom`. Default is `bottom`.

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