Radio button Overview

The radio button component allows users to select one option from a mutually exclusive set of choices. Unlike checkboxes, radio buttons enforce single selection within a group, making them ideal for decisions where only one answer is appropriate. The component provides clear visual feedback, supports various states including checked, unchecked, and disabled, and is designed with accessibility as a core principle.

When to Use

✅ Use radio buttons when:

  • Users need to select exactly one option from multiple choices
  • Options are mutually exclusive (selecting one deselects others)
  • All available options should be visible at once
  • Building forms with single-choice questions
  • Creating filter interfaces with exclusive criteria
  • Configuring settings where only one option can be active

❌ Don't use radio buttons for:

  • Multiple selection scenarios (use checkboxes instead)
  • Binary yes/no choices (consider toggle switches or checkboxes)
  • Single options that can be toggled on/off (use checkboxes)
  • Navigation or action triggers (use buttons)
  • Large sets of options (consider dropdowns or selects)
Design system docs Examples Basic Usage

Simple radio buttons must be grouped together to ensure mutual exclusivity:

<dap-ds-stack direction="column">
<dap-ds-radio-group
  label="Delivery Method"
  value="standard">
  <dap-ds-radio-button
    value="standard"
    label="Standard delivery">
  </dap-ds-radio-button>

  <dap-ds-radio-button
    value="express"
    label="Express delivery">
  </dap-ds-radio-button>

  <dap-ds-radio-button
    value="overnight"
    label="Overnight delivery">
  </dap-ds-radio-button>
</dap-ds-radio-group>
</dap-ds-stack>
Sizes & Scaling

Choose radio button sizes based on your layout density and visual hierarchy:

<>
<dap-ds-stack direction="column">
<div>
  <dap-ds-typography variant="h4">Size variations</dap-ds-typography>
  <dap-ds-stack direction="column">
    <dap-ds-radio-group
      label="Extra small radio buttons"
      value="xs-1"
      size="xs">
      <dap-ds-radio-button
        value="xs-1"
        label="Extra small option"
        description="Compact size for dense layouts">
      </dap-ds-radio-button>
      <dap-ds-radio-button
        value="xs-2"
        label="Another XS option"
        description="Good for mobile interfaces">
      </dap-ds-radio-button>
    </dap-ds-radio-group>

    <dap-ds-radio-group
      label="Small radio buttons (default)"
      value="sm-1"
      size="sm">
      <dap-ds-radio-button
        value="sm-1"
        label="Small option"
        description="Standard size for most use cases">
      </dap-ds-radio-button>
      <dap-ds-radio-button
        value="sm-2"
        label="Another small option"
        description="Balanced size and readability">
      </dap-ds-radio-button>
    </dap-ds-radio-group>

    <dap-ds-radio-group
      label="Medium radio buttons"
      value="md-1"
      size="md">
      <dap-ds-radio-button
        value="md-1"
        label="Medium option"
        description="Larger size for better accessibility">
      </dap-ds-radio-button>
      <dap-ds-radio-button
        value="md-2"
        label="Another medium option"
        description="Good for touch interfaces">
      </dap-ds-radio-button>
    </dap-ds-radio-group>

    <dap-ds-radio-group
      label="Large radio buttons"
      value="lg-1"
      size="lg">
      <dap-ds-radio-button
        value="lg-1"
        label="Large option"
        description="Prominent size for important selections">
      </dap-ds-radio-button>
      <dap-ds-radio-button
        value="lg-2"
        label="Another large option"
        description="Maximum visibility and touch target">
      </dap-ds-radio-button>
    </dap-ds-radio-group>
  </dap-ds-stack>
</div>
</dap-ds-stack>
</>
States & Feedback

Radio buttons support various states to communicate different conditions to users:

<>
<dap-ds-stack direction="column">
<div>
  <dap-ds-typography variant="h4">Interactive states</dap-ds-typography>
  <dap-ds-stack direction="column">
    <dap-ds-radio-group
      label="Basic states"
      value="state-2">
      <dap-ds-radio-button
        label="Default unchecked"
        value="state-1">
      </dap-ds-radio-button>

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

      <dap-ds-radio-button
        label="Disabled unchecked"
        value="state-3"
        disabled>
      </dap-ds-radio-button>

      <dap-ds-radio-button
        label="Disabled checked"
        value="state-4"
        disabled
        checked>
      </dap-ds-radio-button>
    </dap-ds-radio-group>
  </dap-ds-stack>
</div>

<div>
  <dap-ds-typography variant="h4">Validation states</dap-ds-typography>
  <dap-ds-stack direction="column">
    <dap-ds-radio-group
      label="Payment Method"
      required
      feedback="Please select a payment method"
      feedbackType="negative">
      <dap-ds-radio-button
        label="Credit Card"
        value="credit-card"
        invalid>
      </dap-ds-radio-button>

      <dap-ds-radio-button
        label="PayPal"
        value="paypal"
        invalid>
      </dap-ds-radio-button>

      <dap-ds-radio-button
        label="Bank Transfer"
        value="bank-transfer"
        invalid>
      </dap-ds-radio-button>
    </dap-ds-radio-group>

    <dap-ds-radio-group
      label="Subscription Type"
      value="premium"
      feedback="Great choice! Premium includes all features"
      feedbackType="positive">
      <dap-ds-radio-button
        label="Basic"
        value="basic">
      </dap-ds-radio-button>

      <dap-ds-radio-button
        label="Premium"
        value="premium">
      </dap-ds-radio-button>

      <dap-ds-radio-button
        label="Enterprise"
        value="enterprise">
      </dap-ds-radio-button>
    </dap-ds-radio-group>

    <dap-ds-radio-group
      label="Data Retention"
      value="7-days"
      feedback="Warning: Shorter retention periods may affect reporting"
      feedbackType="warning">
      <dap-ds-radio-button
        label="7 days"
        value="7-days">
      </dap-ds-radio-button>

      <dap-ds-radio-button
        label="30 days"
        value="30-days">
      </dap-ds-radio-button>

      <dap-ds-radio-button
        label="90 days"
        value="90-days">
      </dap-ds-radio-button>
    </dap-ds-radio-group>
  </dap-ds-stack>
</div>
</dap-ds-stack>
</>
Label Positioning & Descriptions

Flexible label and description placement for different layout needs:

<>
<dap-ds-stack direction="column">
<div>
  <dap-ds-typography variant="h4">Label positioning</dap-ds-typography>
  <dap-ds-stack direction="column">
    <dap-ds-radio-group
      label="Label on the right (default)"
      value="pos-1">
      <dap-ds-radio-button
        label="Option with right label"
        value="pos-1"
        description="Description appears below the label">
      </dap-ds-radio-button>
      <dap-ds-radio-button
        label="Another right option"
        value="pos-2"
        description="Standard layout pattern">
      </dap-ds-radio-button>
    </dap-ds-radio-group>

    <dap-ds-radio-group
      label="Label on the left"
      value="pos-3">
      <dap-ds-radio-button
        label="Option with left label"
        value="pos-3"
        description="Description still follows the label"
        labelPlacement="left">
      </dap-ds-radio-button>
      <dap-ds-radio-button
        label="Another left option"
        value="pos-4"
        description="Alternative layout for special cases"
        labelPlacement="left">
      </dap-ds-radio-button>
    </dap-ds-radio-group>
  </dap-ds-stack>
</div>

<div>
  <dap-ds-typography variant="h4">Description placement</dap-ds-typography>
  <dap-ds-stack direction="column">
    <dap-ds-radio-group
      label="Description below"
      value="desc-1">
      <dap-ds-radio-button
        label="Option with description below"
        value="desc-1"
        description="This description appears below the label"
        descriptionPlacement="bottom">
      </dap-ds-radio-button>
      <dap-ds-radio-button
        label="Another option below"
        value="desc-2"
        description="Standard description placement"
        descriptionPlacement="bottom">
      </dap-ds-radio-button>
    </dap-ds-radio-group>

    <dap-ds-radio-group
      label="Description above"
      value="desc-3">
      <dap-ds-radio-button
        label="Option with description above"
        value="desc-3"
        description="This description appears above the label"
        descriptionPlacement="top">
      </dap-ds-radio-button>
      <dap-ds-radio-button
        label="Another option above"
        value="desc-4"
        description="Description first, then label"
        descriptionPlacement="top">
      </dap-ds-radio-button>
    </dap-ds-radio-group>
  </dap-ds-stack>
</div>
</dap-ds-stack>
</>
Background & Border Variants

Special styling options for use on colored backgrounds or specific visual emphasis:

<>
<div style={{ backgroundColor: "#e9edf2", padding: "16px", borderRadius: "8px" }}>
<dap-ds-stack direction="column">
  <dap-ds-typography variant="h4">Background variant</dap-ds-typography>
  <dap-ds-stack direction="column">
    <dap-ds-radio-group
      label="Background style radio buttons"
      value="bg-1">
      <dap-ds-radio-button
        label="Background style option"
        description="Better visibility on colored backgrounds"
        value="bg-1"
        type="background">
      </dap-ds-radio-button>

      <dap-ds-radio-button
        label="Background with border"
        description="Enhanced definition with border"
        value="bg-2"
        type="background"
        border>
      </dap-ds-radio-button>

      <dap-ds-radio-button
        label="Regular radio button"
        description="Standard styling for comparison"
        value="bg-3">
      </dap-ds-radio-button>
    </dap-ds-radio-group>
  </dap-ds-stack>
</dap-ds-stack>
</div>

<div style={{ backgroundColor: "white", padding: "16px", border: "1px solid #e0e0e0", borderRadius: "8px", marginTop: "16px" }}>
<dap-ds-stack direction="column">
  <dap-ds-typography variant="h4">Border emphasis</dap-ds-typography>
  <dap-ds-stack direction="column">
    <dap-ds-radio-group
      label="Bordered radio buttons"
      value="border-1">
      <dap-ds-radio-button
        label="Bordered option"
        description="Added border for visual emphasis"
        value="border-1"
        border>
      </dap-ds-radio-button>

      <dap-ds-radio-button
        label="Bordered and selected"
        description="Border with checked state"
        value="border-2"
        border>
      </dap-ds-radio-button>
    </dap-ds-radio-group>
  </dap-ds-stack>
</dap-ds-stack>
</div>
</>
Real-World Patterns Survey Question Form 
<div style={{border: 'var(--dds-border-width-base) solid var(--dds-border-neutral-subtle)', padding: 'var(--dds-spacing-600)', borderRadius: 'var(--dds-radius-base)'}}>
<dap-ds-stack>
  <dap-ds-typography variant="h3">Customer Satisfaction Survey</dap-ds-typography>
  
  <dap-ds-radio-group
    label="How satisfied are you with our service?"
    description="Please rate your overall experience"
    required
    value="satisfied">
    
    <dap-ds-radio-button
      label="Very Satisfied"
      description="Exceeded my expectations"
      value="very-satisfied">
    </dap-ds-radio-button>

    <dap-ds-radio-button
      label="Satisfied"
      description="Met my expectations"
      value="satisfied">
    </dap-ds-radio-button>

    <dap-ds-radio-button
      label="Neutral"
      description="Neither satisfied nor dissatisfied"
      value="neutral">
    </dap-ds-radio-button>

    <dap-ds-radio-button
      label="Dissatisfied"
      description="Did not meet my expectations"
      value="dissatisfied">
    </dap-ds-radio-button>

    <dap-ds-radio-button
      label="Very Dissatisfied"
      description="Far below my expectations"
      value="very-dissatisfied">
    </dap-ds-radio-button>
  </dap-ds-radio-group>

  <dap-ds-radio-group
    label="How likely are you to recommend us?"
    description="Scale from 1-5 where 5 is most likely"
    required
    value="4">
    
    <dap-ds-radio-button
      label="1 - Not at all likely"
      value="1">
    </dap-ds-radio-button>

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

    <dap-ds-radio-button
      label="3 - Neutral"
      value="3">
    </dap-ds-radio-button>

    <dap-ds-radio-button
      label="4 - Likely"
      value="4">
    </dap-ds-radio-button>

    <dap-ds-radio-button
      label="5 - Extremely likely"
      value="5">
    </dap-ds-radio-button>
  </dap-ds-radio-group>

  <dap-ds-stack direction="row">
    <dap-ds-button>Submit Survey</dap-ds-button>
    <dap-ds-button variant="outline">Save for Later</dap-ds-button>
  </dap-ds-stack>
</dap-ds-stack>
</div>
Settings Configuration 
<div style={{border: 'var(--dds-border-width-base) solid var(--dds-border-neutral-subtle)', padding: 'var(--dds-spacing-600)', borderRadius: 'var(--dds-radius-base)'}}>
<dap-ds-stack>
  <dap-ds-typography variant="h3">Application Settings</dap-ds-typography>
  
  <dap-ds-radio-group
    label="Theme Preference"
    description="Choose your preferred application theme"
    value="auto">
    
    <dap-ds-radio-button
      label="Light Theme"
      description="Always use light colors"
      value="light">
    </dap-ds-radio-button>

    <dap-ds-radio-button
      label="Dark Theme"
      description="Always use dark colors"
      value="dark">
    </dap-ds-radio-button>

    <dap-ds-radio-button
      label="System Default"
      description="Follow your device's theme setting"
      value="auto">
    </dap-ds-radio-button>
  </dap-ds-radio-group>

  <dap-ds-radio-group
    label="Language Settings"
    description="Select your preferred language"
    value="en">
    
    <dap-ds-radio-button
      label="English"
      description="Display interface in English"
      value="en">
    </dap-ds-radio-button>

    <dap-ds-radio-button
      label="Magyar"
      description="Felület megjelenítése magyarul"
      value="hu">
    </dap-ds-radio-button>

    <dap-ds-radio-button
      label="Deutsch"
      description="Benutzeroberfläche auf Deutsch anzeigen"
      value="de">
    </dap-ds-radio-button>
  </dap-ds-radio-group>

  <dap-ds-radio-group
    label="Data Sync Frequency"
    description="How often should we sync your data?"
    value="hourly"
    feedback="More frequent syncing uses more battery"
    feedbackType="warning">
    
    <dap-ds-radio-button
      label="Real-time"
      description="Instant synchronization (high battery usage)"
      value="realtime">
    </dap-ds-radio-button>

    <dap-ds-radio-button
      label="Every Hour"
      description="Balanced performance and battery life"
      value="hourly">
    </dap-ds-radio-button>

    <dap-ds-radio-button
      label="Daily"
      description="Minimal battery impact"
      value="daily">
    </dap-ds-radio-button>

    <dap-ds-radio-button
      label="Manual Only"
      description="Sync only when requested"
      value="manual">
    </dap-ds-radio-button>
  </dap-ds-radio-group>

  <dap-ds-stack direction="row">
    <dap-ds-button>Save Settings</dap-ds-button>
    <dap-ds-button variant="outline">Reset to Defaults</dap-ds-button>
  </dap-ds-stack>
</dap-ds-stack>
</div>
Shipping Options 
<div style={{border: 'var(--dds-border-width-base) solid var(--dds-border-neutral-subtle)', padding: 'var(--dds-spacing-600)', borderRadius: 'var(--dds-radius-base)'}}>
<dap-ds-stack>
  <dap-ds-typography variant="h3">Delivery Options</dap-ds-typography>
  
  <dap-ds-radio-group
    label="Shipping Method"
    description="Choose your preferred delivery option"
    required
    value="standard">
    
    <dap-ds-radio-button
      label="Standard Delivery"
      description="3-5 business days • FREE"
      value="standard">
    </dap-ds-radio-button>

    <dap-ds-radio-button
      label="Express Delivery"
      description="1-2 business days • $9.99"
      value="express">
    </dap-ds-radio-button>

    <dap-ds-radio-button
      label="Overnight Delivery"
      description="Next business day by 10:30 AM • $24.99"
      value="overnight">
    </dap-ds-radio-button>

    <dap-ds-radio-button
      label="Weekend Delivery"
      description="Saturday delivery available • $14.99"
      value="weekend">
    </dap-ds-radio-button>
  </dap-ds-radio-group>

  <dap-ds-radio-group
    label="Delivery Instructions"
    description="Special delivery preferences"
    value="doorstep">
    
    <dap-ds-radio-button
      label="Leave at Doorstep"
      description="Safe for most neighborhoods"
      value="doorstep">
    </dap-ds-radio-button>

    <dap-ds-radio-button
      label="Require Signature"
      description="Someone must be present to sign"
      value="signature">
    </dap-ds-radio-button>

    <dap-ds-radio-button
      label="Deliver to Neighbor"
      description="Leave with trusted neighbor if not home"
      value="neighbor">
    </dap-ds-radio-button>

    <dap-ds-radio-button
      label="Hold at Post Office"
      description="Pick up at your convenience"
      value="pickup">
    </dap-ds-radio-button>
  </dap-ds-radio-group>

  <div style={{borderTop: 'var(--dds-border-width-base) solid var(--dds-border-neutral-subtle)', paddingTop: 'var(--dds-spacing-400)', marginTop: 'var(--dds-spacing-400)'}}>
    <dap-ds-stack direction="row" justify="space-between" align="center">
      <div>
        <dap-ds-typography variant="body" bold>Estimated Delivery:</dap-ds-typography>
        <dap-ds-typography variant="body">Thursday, March 21</dap-ds-typography>
      </div>
      <dap-ds-button>Continue to Payment</dap-ds-button>
    </dap-ds-stack>
  </div>
</dap-ds-stack>
</div>
Accessibility & Keyboard Navigation

The radio button component is designed with accessibility as a core principle:

Keyboard Support
  • Arrow Keys: Navigate between radio buttons in a group
  • Space: Select the focused radio button
  • Enter: Alternative selection method (custom enhancement)
  • Tab: Navigate between radio button groups
  • Shift + Tab: Navigate backwards between groups
Screen Reader Support
  • Proper ARIA labels and descriptions
  • Group labeling for related radio buttons
  • State announcements (checked, unchecked)
  • Form association and validation messages
  • Radio button group context
Focus Management
  • Clear focus indicators
  • Logical tab order within and between groups
  • Programmatic focus control
  • Only checked radio button is focusable by default
<dap-ds-stack direction="column">
<dap-ds-typography variant="h4">Accessibility Examples</dap-ds-typography>

<dap-ds-radio-group
  label="Accessible radio group"
  description="Try navigating with Tab and arrow keys, select with Space"
  value="accessible-1">
  <dap-ds-radio-button
    label="First accessible option"
    value="accessible-1">
  </dap-ds-radio-button>

  <dap-ds-radio-button
    label="Second accessible option"
    value="accessible-2">
  </dap-ds-radio-button>

  <dap-ds-radio-button
    label="Third accessible option"
    value="accessible-3">
  </dap-ds-radio-button>
</dap-ds-radio-group>

<dap-ds-radio-group
  label="Required field with validation"
  description="Screen readers announce validation messages"
  required
  feedback="Please select an option to continue"
  feedbackType="negative">
  <dap-ds-radio-button
    label="Option requiring selection"
    value="validation-1"
    invalid>
  </dap-ds-radio-button>

  <dap-ds-radio-button
    label="Another required option"
    value="validation-2"
    invalid>
  </dap-ds-radio-button>
</dap-ds-radio-group>
</dap-ds-stack>
Best Practices Form Integration
  • Always use radio buttons within dap-ds-radio-group components
  • Provide clear, descriptive group labels
  • Use descriptions for additional context when needed
  • Implement proper validation feedback
  • Consider the number of options (use dropdowns for many options)
Visual Design
  • Maintain consistent sizing within forms
  • Use background variants on colored surfaces
  • Consider border emphasis for important selections
  • Provide sufficient color contrast
  • Test with different themes and accessibility settings
User Experience
  • Limit the number of radio button options (typically 2-7)
  • Order options logically (alphabetical, numerical, or by popularity)
  • Provide clear feedback for validation states
  • Make the most common choice the default selection when appropriate
  • Test with real users and assistive technologies
Group Organization
  • Group related options together
  • Use clear group labels that describe the choice
  • Consider progressive disclosure for complex option sets
  • Ensure mutual exclusivity is clear to users
  • Provide helpful descriptions for complex options
Importing 
import { DapDSRadioButton } from 'dap-design-system/dist/dds'
Importing React 
import { DapDSRadioButtonReact } from 'dap-design-system/dist/react'
Attributes
PropertyTypeDefaultDescription
focusablebooleanfalseWhether the radio button is focusable.
preventDefaultbooleanfalseWhether the radio button should prevent the default action.
borderbooleanfalseThis sets up a border around the radio button, when true.
type'normal', 'background''normal'The type of the radio button.
namestringThe name of the radio button.
valuestringThe value of the radio button.
checkedbooleanWhether the radio button is checked.
labelstringThe label of the radio button.
descriptionstringThe description of the radio button.
disabledbooleanWhether the radio button is disabled.
requiredbooleanWhether the radio button is required.
size'xs', 'sm' , 'md' , 'lg'The size of the radio button.
labelPlacement'left', 'right'The placement of the label.
descriptionPlacement'top', 'bottom'The placement of the description.
subtlebooleanThe weight of the label.
feedbackstringThe feedback of the radio button.
feedbackType'negative', 'positive' , 'warning'The feedback type of the radio button.
invalidbooleanThe invalid state of the radio button.
optionalbooleanThe optional state of the radio button.
optionalLabelstringThe optional label of the radio button.
Slots

No slots available.

Events
Event NameDescriptionType
dds-changeFired when the radio button is checked.{checked: boolean, value: string, disabled: boolean, type: 'radio' }
dds-blurEmitted when the radio button loses focus.{void }
dds-focusEmitted when the radio button gains focus.{void }
dds-inputEmitted when the radio button receives input.{checked: boolean, value: string, disabled: boolean }
CSS Parts
Part NameDescription
baseThe main radio button container.
wrapperThe wrapper of the radio button.
base-labelThe main label container.
labelThe label of the radio button.
inputThe native input of the radio button.
controlThe control of the radio button.
label-containerThe label container of the radio button.
descriptionThe description of the radio button.
CSS Custom Properties
Property NameDescription
--dds-radio-sizeSets the size of the radio button. Default: var(--dds-spacing-600)
--dds-radio-border-widthSets the border width of the radio button. Default: var(--dds-border-width-large)
--dds-radio-border-radiusSets the border radius of the radio button. Default: var(--dds-radius-rounded)
--dds-radio-border-colorSets the border color of the radio button. Default: var(--dds-border-neutral-base)
--dds-radio-background-colorSets the background color of the radio button. Default: var(--dds-background-neutral-base)
--dds-radio-hover-border-colorSets the border color of the radio button on hover. Default: var(--dds-border-neutral-medium)
--dds-radio-hover-background-colorSets the background color of the radio button on hover. Default: var(--dds-background-neutral-medium)
--dds-radio-active-border-colorSets the border color of the radio button when active. Default: var(--dds-border-neutral-strong)
--dds-radio-active-background-colorSets the background color of the radio button when active. Default: var(--dds-background-neutral-strong)
--dds-radio-checked-background-colorSets the background color of the checked radio button. Default: var(--dds-background-brand-base-inverted)
--dds-radio-checked-hover-background-colorSets the background color of the checked radio button on hover. Default: var(--dds-background-brand-medium-inverted)
--dds-radio-checked-active-background-colorSets the background color of the checked radio button when active. Default: var(--dds-background-brand-strong-inverted)
--dds-radio-disabled-background-colorSets the background color of the disabled radio button. Default: var(--dds-background-neutral-disabled)
--dds-radio-icon-background-colorSets the background color of the radio button icon. Default: var(--dds-transparent-white-strong-static)
--dds-radio-disabled-icon-background-colorSets the background color of the disabled radio button icon. Default: var(--dds-background-neutral-stronger)
--dds-radio-invalid-border-colorSets the border color of the invalid radio button. Default: var(--dds-border-negative-base)
--dds-radio-invalid-background-colorSets the background color of the invalid radio button. Default: var(--dds-background-negative-base)
--dds-radio-invalid-hover-border-colorSets the border color of the invalid radio button on hover. Default: var(--dds-border-negative-medium)
--dds-radio-invalid-hover-background-colorSets the background color of the invalid radio button on hover. Default: var(--dds-background-negative-medium)
--dds-radio-invalid-active-border-colorSets the border color of the invalid radio button when active. Default: var(--dds-border-negative-strong)
--dds-radio-invalid-active-background-colorSets the background color of the invalid radio button when active. Default: var(--dds-background-negative-strong)
--dds-radio-invalid-checked-background-colorSets the background color of the invalid checked radio button. Default: var(--dds-background-negative-base-inverted)
--dds-radio-invalid-checked-hover-background-colorSets the background color of the invalid checked radio button on hover. Default: var(--dds-background-negative-medium-inverted)
--dds-radio-invalid-checked-active-background-colorSets the background color of the invalid checked radio button when active. Default: var(--dds-background-negative-strong-inverted)
--dds-radio-icon-sizeSets the size of the radio button icon. Default: var(--dds-spacing-300)
Components Radio group <dap-ds-radio-group/> Attributes
PropertyTypeDefaultDescription
tooltipPlacement'top', 'right' , 'bottom' , 'left''bottom'The tooltip placement of the radio group.
hiddenInputHTMLInputElement
optionalLabelstring''Text of optional label.
namestringThe name of the radio group.
valuestringThe value of the radio group.
disabledbooleanWhether the radio group is disabled.
requiredbooleanWhether the radio group is required.
labelstringThe label of the radio group.
descriptionstringThe description of the radio group.
tooltipstringThe tooltip of the radio group.
feedbackstringThe feedback of the radio group.
feedbackType'negative', 'positive' , 'warning'The feedback type of the radio group. Can be negative, positive, or warning.
optionalbooleanThe optional state of the radio group.
subtlebooleanFont 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
NameDescription
(default)The content of the radio group.
feedback-iconThe custom icon of the feedback.
Events
Event NameDescriptionType
dds-changeFired when the radio group is checked.void
dds-blurEmitted when the radio group loses focus.void
dds-focusEmitted when the radio group gains focus.void
CSS Parts
Part NameDescription
baseThe main radio group container.
labelThe label of the radio group.
tooltipThe tooltip of the radio group.
containerThe container of the radio group items.
CSS Custom Properties

No CSS custom properties available.