• Introduction
    • Why Liquid Oxygen
    • Getting started
      • React
      • Vue
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Tailwind CSS integration
    • Design tokens
    • Testing
    • Sandbox applications
    • Troubleshooting
      • Popped-out element is rendered in wrong container
      • Failed to execute removeChild on Node
    • FAQ
    • Contributing
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
      • Card Stack
    • Checkbox
    • Circular Progress
    • Context Menu
      • Menu
      • Menuitem
      • Menuitem Group
    • Cookie Consent
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
      • Option Group
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outside
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Column
      • Table Footer
      • Table Head
      • Table Header
      • Table Row
      • Table Toolbar
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Default
  2. Fit content
  3. Size
  4. With icon
  5. Brand color
  6. Disabled
    1. All elements
    2. Single element
  7. Properties
  8. Events
  9. Methods
    1. focusInner() => Promise<void>
  10. Shadow Parts
Components Switch
(external link)

ld-switch #

A switch is a collection of two or more items that behaves similar to a radio button group or toggle. It can have a single or no item selected at a time.

Default #

<ld-switch legend="Chemical compound" name="food-type-web-component-default" required>
  <ld-switch-item value="water" checked>Water</ld-switch-item>
  <ld-switch-item value="alcohol">Alcohol</ld-switch-item>
</ld-switch>
<fieldset class="ld-switch">
  <legend>Chemical compound</legend> 
  <label class="ld-switch-item">
    <input name="food-type-css-component-default" 
           type="radio" 
           value="water" 
           checked />
    <span class="ld-switch-item__content">
      <span class="ld-switch-item__label">Water</span>
    </span>
  </label>
  <label class="ld-switch-item">
    <input name="food-type-css-component-default"
           type="radio"
           value="alcohol" />
    <span class="ld-switch-item__content">
      <span class="ld-switch-item__label">Alcohol</span>
    </span>
  </label>
</fieldset>
<LdSwitch
  legend="Chemical compound"
  name="food-type-web-component-default"
  required
>
  <LdSwitchItem value="water" checked>
    Water
  </LdSwitchItem>
  <LdSwitchItem value="alcohol">Alcohol</LdSwitchItem>
</LdSwitch>
Water Alcohol
Chemical compound

Fit content #

By default all switch items take up the same amout of horizontal space. However, you can make each switch item take up as little space as its content requires by applying the fit-content prop.

<ld-switch legend="Chemical compound" name="food-type-web-component-fit-content" fit-content>
  <ld-switch-item value="diamorphine" checked>Diamorphine</ld-switch-item>
  <ld-switch-item value="lsd">Lysergic acid diethylamide</ld-switch-item>
</ld-switch>
<fieldset class="ld-switch ld-switch--fit-content">
  <legend>Chemical compound</legend>
  <label class="ld-switch-item">
    <input name="food-type-css-component-fit-content"
           type="radio"
           value="diamorphine"
           checked />
    <span class="ld-switch-item__content">
      <span class="ld-switch-item__label">Diamorphine</span>
    </span>
  </label>
  <label class="ld-switch-item">
    <input name="food-type-css-component-fit-content"
           type="radio"
           value="lsd" />
    <span class="ld-switch-item__content">
      <span class="ld-switch-item__label">Lysergic acid diethylamide</span>
    </span>
  </label>
</fieldset>
<LdSwitch
  legend="Chemical compound"
  name="food-type-web-component-fit-content"
  fitContent
>
  <LdSwitchItem value="diamorphine" checked>
    Diamorphine
  </LdSwitchItem>
  <LdSwitchItem value="lsd">Lysergic acid diethylamide</LdSwitchItem>
</LdSwitch>
Diamorphine Lysergic acid diethylamide
Chemical compound

Size #

<ld-switch legend="Chemical compound" name="food-type-web-component-size-sm" size="sm">
  <ld-switch-item value="water" checked>Water</ld-switch-item>
  <ld-switch-item value="alcohol">Alcohol</ld-switch-item>
</ld-switch>

<ld-switch legend="Chemical compound" name="food-type-web-component-size-md" size="md">
  <ld-switch-item value="water" checked>Water</ld-switch-item>
  <ld-switch-item value="alcohol">Alcohol</ld-switch-item>
</ld-switch>

<ld-switch legend="Chemical compound" name="food-type-web-component-size-lg" size="lg">
  <ld-switch-item value="water" checked>Water</ld-switch-item>
  <ld-switch-item value="alcohol">Alcohol</ld-switch-item>
</ld-switch>
<fieldset class="ld-switch ld-switch--sm">
  <legend>Chemical compound</legend> 
  <label class="ld-switch-item">
    <input name="food-type-css-component-size-sm" type="radio" value="water" checked />
    <span class="ld-switch-item__content">
      <span class="ld-switch-item__label">Water</span>
    </span>
  </label>
  <label class="ld-switch-item">
    <input name="food-type-css-component-size-sm" type="radio" value="alcohol" />
    <span class="ld-switch-item__content">
      <span class="ld-switch-item__label">Alcohol</span>
    </span>
  </label>
</fieldset>

<fieldset class="ld-switch">
  <legend>Chemical compound</legend>
  <label class="ld-switch-item">
    <input name="food-type-css-component-size-md" type="radio" value="water" checked />
    <span class="ld-switch-item__content">
      <span class="ld-switch-item__label">Water</span>
    </span>
  </label>
  <label class="ld-switch-item">
    <input name="food-type-css-component-size-md" type="radio" value="alcohol" />
    <span class="ld-switch-item__content">
      <span class="ld-switch-item__label">Alcohol</span>
    </span>
  </label>
</fieldset>

<fieldset class="ld-switch ld-switch--lg">
  <legend>Chemical compound</legend>
  <label class="ld-switch-item">
    <input name="food-type-css-component-size-lg"
           type="radio"
           value="water"
           checked />
    <span class="ld-switch-item__content">
      <span class="ld-switch-item__label">Water</span>
    </span>
  </label>
  <label class="ld-switch-item">
    <input name="food-type-css-component-size-lg"
           type="radio"
           value="alcohol" />
    <span class="ld-switch-item__content">
      <span class="ld-switch-item__label">Alcohol</span>
    </span>
  </label>
</fieldset>
<LdSwitch
  legend="Chemical compound"
  name="food-type-web-component-size-sm"
  size="sm"
>
  <LdSwitchItem value="water" checked>
    Water
  </LdSwitchItem>
  <LdSwitchItem value="alcohol">Alcohol</LdSwitchItem>
</LdSwitch>

<LdSwitch
  legend="Chemical compound"
  name="food-type-web-component-size-md"
  size="md"
>
  <LdSwitchItem value="water" checked>
    Water
  </LdSwitchItem>
  <LdSwitchItem value="alcohol">Alcohol</LdSwitchItem>
</LdSwitch>

<LdSwitch
  legend="Chemical compound"
  name="food-type-web-component-size-lg"
  size="lg"
>
  <LdSwitchItem value="water" checked>
    Water
  </LdSwitchItem>
  <LdSwitchItem value="alcohol">Alcohol</LdSwitchItem>
</LdSwitch>
Water Alcohol Water Alcohol Water Alcohol
Chemical compound
Chemical compound
Chemical compound

With icon #

<ld-switch legend="Chemical compound" name="food-type-web-component-icon-sm" size="sm">
  <ld-switch-item value="water" checked>
    Water
    <ld-icon slot="icon-end" name="placeholder" size="sm"></ld-icon>
  </ld-switch-item>
  <ld-switch-item value="alcohol">
    Alcohol
    <ld-icon slot="icon-end" name="placeholder" size="sm"></ld-icon>
  </ld-switch-item>
</ld-switch>

<ld-switch legend="Chemical compound" name="food-type-web-component-icon-md" size="md">
  <ld-switch-item value="water" checked>
    <ld-icon slot="icon-start" name="placeholder" aria-label="Text"></ld-icon>
  </ld-switch-item>
  <ld-switch-item value="alcohol">
    <ld-icon slot="icon-start" name="placeholder" aria-label="Text"></ld-icon>
  </ld-switch-item>
</ld-switch>

<ld-switch legend="Chemical compound" name="food-type-web-component-icon-lg" size="lg">
  <ld-switch-item value="water" checked>
    <ld-icon slot="icon-start" name="placeholder" size="lg"></ld-icon>
    Water
  </ld-switch-item>
  <ld-switch-item value="alcohol">
    <ld-icon slot="icon-start" name="placeholder" size="lg"></ld-icon>
    Alcohol
  </ld-switch-item>
</ld-switch>
<fieldset class="ld-switch ld-switch--sm">
  <legend>Chemical compound</legend>
  <label class="ld-switch-item">
    <input name="food-type-css-component-icon-sm"
           type="radio"
           value="water"
           checked />
    <span class="ld-switch-item__content">
      <span class="ld-switch-item__label">Water</span>
      <span class="ld-icon ld-icon--sm">
        <svg viewBox="0 0 24 24" fill="none">
          <title>Text</title>
          <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
          <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
        </svg>
      </span>
    </span>
  </label>
  <label class="ld-switch-item">
    <input name="food-type-css-component-icon-sm"
           type="radio"
           value="alcohol" />
    <span class="ld-switch-item__content">
      <span class="ld-switch-item__label">Alcohol</span>
      <span class="ld-icon ld-icon--sm">
        <svg viewBox="0 0 24 24" fill="none">
          <title>Text</title>
          <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
          <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
        </svg>
      </span>
    </span>
  </label>
</fieldset>

<fieldset class="ld-switch">
  <legend>Chemical compound</legend>
  <label class="ld-switch-item">
    <input name="food-type-css-component-icon-md"
           type="radio"
           value="water"
           checked />
    <span class="ld-switch-item__content">
      <span class="ld-icon">
        <svg viewBox="0 0 24 24" fill="none">
          <title>Text</title>
          <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
          <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
        </svg>
      </span>
    </span>
  </label>
  <label class="ld-switch-item">
    <input name="food-type-css-component-icon-md"
           type="radio"
           value="alcohol" />
    <span class="ld-switch-item__content">
      <span class="ld-icon">
        <svg viewBox="0 0 24 24" fill="none">
          <title>Text</title>
          <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
          <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
        </svg>
      </span>
    </span>
  </label>
</fieldset>

<fieldset class="ld-switch ld-switch--lg">
  <legend>Chemical compound</legend>
  <label class="ld-switch-item">
    <input name="food-type-css-component-icon-lg"
           type="radio"
           value="water"
           checked />
    <span class="ld-switch-item__content">
      <span class="ld-icon ld-icon--lg">
        <svg viewBox="0 0 24 24" fill="none">
          <title>Text</title>
          <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
          <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
        </svg>
      </span>
      <span class="ld-switch-item__label">Water</span>
    </span>
  </label>
  <label class="ld-switch-item">
    <input name="food-type-css-component-icon-lg"
           type="radio"
           value="alcohol" />
    <span class="ld-switch-item__content">
      <span class="ld-icon ld-icon--lg">
        <svg viewBox="0 0 24 24" fill="none">
          <title>Text</title>
          <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
          <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
        </svg>
      </span>
      <span class="ld-switch-item__label">Alcohol</span>
    </span>
  </label>
</fieldset>
<LdSwitch
  legend="Chemical compound"
  name="food-type-web-component-icon-sm"
  size="sm"
>
  <LdSwitchItem value="water" checked>
    <LdIcon slot="icon-start" name="placeholder" size="sm" />
    Water
  </LdSwitchItem>
  <LdSwitchItem value="alcohol">
    <LdIcon slot="icon-start" name="placeholder" size="sm" />
    Alcohol
  </LdSwitchItem>
</LdSwitch>

<LdSwitch
  legend="Chemical compound"
  name="food-type-web-component-icon-md"
  size="md"
>
  <LdSwitchItem value="water" checked>
    <LdIcon slot="icon-start" name="placeholder" size="md" />
    Water
  </LdSwitchItem>
  <LdSwitchItem value="alcohol">
    <LdIcon slot="icon-start" name="placeholder" size="md" />
    Alcohol
  </LdSwitchItem>
</LdSwitch>

<LdSwitch
  legend="Chemical compound"
  name="food-type-web-component-icon-lg"
  size="lg"
>
  <LdSwitchItem value="water" checked>
    <LdIcon slot="icon-start" name="placeholder" size="lg" />
    Water
  </LdSwitchItem>
  <LdSwitchItem value="alcohol">
    <LdIcon slot="icon-start" name="placeholder" size="lg" />
    Alcohol
  </LdSwitchItem>
</LdSwitch>
Water Alcohol Water Alcohol
Chemical compound
Chemical compound
Chemical compound

Brand color #

<ld-switch legend="Chemical compound" name="food-type-web-component-brand-color" brand-color>
  <ld-switch-item value="water" checked>Water</ld-switch-item>
  <ld-switch-item value="alcohol">Alcohol</ld-switch-item>
</ld-switch>
<fieldset class="ld-switch ld-switch--brand-color">
  <legend>Chemical compound</legend>
  <label class="ld-switch-item">
    <input name="food-type-css-component-brand-color"
           type="radio"
           value="water"
           checked />
    <span class="ld-switch-item__content">
      <span class="ld-switch-item__label">Water</span>
    </span>
  </label>
  <label class="ld-switch-item">
    <input name="food-type-css-component-brand-color"
           type="radio"
           value="alcohol" />
    <span class="ld-switch-item__content">
      <span class="ld-switch-item__label">Alcohol</span>
    </span>
  </label>
</fieldset>
<LdSwitch
  legend="Chemical compound"
  name="food-type-web-component-brand-color"
  brandColor
>
  <LdSwitchItem value="water" checked>
    Water
  </LdSwitchItem>
  <LdSwitchItem value="alcohol">Alcohol</LdSwitchItem>
</LdSwitch>
Water Alcohol
Chemical compound

Disabled #

All elements #

<ld-switch legend="Chemical compound" name="food-type-web-component-disabled" disabled>
  <ld-switch-item value="water" checked>Water</ld-switch-item>
  <ld-switch-item value="alcohol">Alcohol</ld-switch-item>
</ld-switch>
<fieldset class="ld-switch">
  <legend>Chemical compound</legend> 
  <label class="ld-switch-item">
    <input name="food-type-css-component-disabled"
           type="radio"
           value="water"
           disabled
           checked />
    <span class="ld-switch-item__content">
      <span class="ld-switch-item__label">Water</span>
    </span>
  </label>
  <label class="ld-switch-item">
    <input name="food-type-css-component-disabled"
           type="radio"
           value="alcohol"
           disabled />
    <span class="ld-switch-item__content">
      <span class="ld-switch-item__label">Alcohol</span>
    </span>
  </label>
</fieldset>
<LdSwitch
  legend="Chemical compound"
  name="food-type-web-component-disabled"
  disabled
>
  <LdSwitchItem value="water" checked>
    Water
  </LdSwitchItem>
  <LdSwitchItem value="alcohol">Alcohol</LdSwitchItem>
</LdSwitch>
Water Alcohol
Chemical compound

If you want the switch to stay focusable even if it is disabled, use aria-disabled in place of disabled:

<ld-switch legend="Chemical compound" name="food-type-web-component-aria-disabled" aria-disabled="true">
  <ld-switch-item value="water" checked>Water</ld-switch-item>
  <ld-switch-item value="alcohol">Alcohol</ld-switch-item>
</ld-switch>
<fieldset class="ld-switch">
  <legend>Chemical compound</legend>
  <label class="ld-switch-item">
    <input name="food-type-css-component-aria-disabled"
           type="radio"
           value="water"
           aria-disabled="true"
           checked />
    <span class="ld-switch-item__content">
      <span class="ld-switch-item__label">Water</span>
    </span>
  </label>
  <label class="ld-switch-item">
    <input name="food-type-css-component-aria-disabled"
           type="radio"
           value="alcohol"
           aria-disabled="true" />
    <span class="ld-switch-item__content">
      <span class="ld-switch-item__label">Alcohol</span>
    </span>
  </label>
</fieldset>

<!-- Example code for input prevention on aria-disabled switch -->
<script>
const inputs = document.querySelectorAll('input[name="food-type-css-component-aria-disabled"]')
Array.from(inputs).forEach(input => {
  input.addEventListener('click', (ev) => {
    ev.preventDefault()
  })
})
</script>
<LdSwitch
  legend="Chemical compound"
  name="food-type-web-component-aria-disabled"
  aria-disabled="true"
>
  <LdSwitchItem value="water" checked>
    Water
  </LdSwitchItem>
  <LdSwitchItem value="alcohol">Alcohol</LdSwitchItem>
</LdSwitch>
Water Alcohol
Chemical compound

Single element #

<ld-switch legend="Chemical compound" name="food-type-web-component-single-element-disabled">
  <ld-switch-item value="water" checked>Water</ld-switch-item>
  <ld-switch-item value="alcohol">Alcohol</ld-switch-item> 
  <ld-switch-item value="vampire" disabled>Vampire</ld-switch-item>
</ld-switch>
<fieldset class="ld-switch">
  <legend>Chemical compound</legend> 
  <label class="ld-switch-item">
    <input name="food-type-css-component-single-element-disabled"
           type="radio"
           value="water"
           checked />
    <span class="ld-switch-item__content">
      <span class="ld-switch-item__label">Water</span>
    </span>
  </label>
  <label class="ld-switch-item">
    <input name="food-type-css-component-single-element-disabled"
           type="radio"
           value="alcohol" />
    <span class="ld-switch-item__content">
      <span class="ld-switch-item__label">Alcohol</span>
    </span>
  </label>
  <label class="ld-switch-item">
    <input name="food-type-css-component-single-element-disabled"
           type="radio"
           value="vampire"
           disabled />
    <span class="ld-switch-item__content">
      <span class="ld-switch-item__label">Vampire</span>
    </span>
  </label>
</fieldset>
<LdSwitch
  legend="Chemical compound"
  name="food-type-web-component-single-element-disabled"
>
  <LdSwitchItem value="water" checked>
    Water
  </LdSwitchItem>
  <LdSwitchItem value="alcohol">Alcohol</LdSwitchItem>
  <LdSwitchItem value="vampire" disabled>Vampire</LdSwitchItem>
</LdSwitch>
Water Alcohol Vampire
Chemical compound

If you want to disable a single switch item but keep it focusable, use aria-disabled in place of disabled:

<ld-switch legend="Chemical compound" name="food-type-web-component-single-element-aria-disabled">
  <ld-switch-item value="water" checked>Water</ld-switch-item>
  <ld-switch-item value="alcohol">Alcohol</ld-switch-item>
  <ld-switch-item value="vampire" aria-disabled="true">Vampire</ld-switch-item>
</ld-switch>
<fieldset class="ld-switch">
  <legend>Chemical compound</legend>
  <label class="ld-switch-item">
    <input name="food-type-css-component-single-element-aria-disabled"
           type="radio"
           value="water"
           checked />
    <span class="ld-switch-item__content">
      <span class="ld-switch-item__label">Water</span>
    </span>
  </label>
  <label class="ld-switch-item">
    <input name="food-type-css-component-single-element-aria-disabled"
           type="radio"
           value="alcohol" />
    <span class="ld-switch-item__content">
      <span class="ld-switch-item__label">Alcohol</span>
    </span>
  </label>
  <label class="ld-switch-item">
    <input name="food-type-css-component-single-element-aria-disabled"
           type="radio"
           value="vampire"
           aria-disabled="true" />
    <span class="ld-switch-item__content">
      <span class="ld-switch-item__label">Vampire</span>
    </span>
  </label>
</fieldset>

<!-- Example code for input prevention on aria-disabled switch items -->
<script>
const all = Array.from(document.querySelectorAll('input[name="food-type-css-component-single-element-aria-disabled"]'))
const enabled = all.filter(input => !input.ariaDisabled)
const disabled = all.filter(input => input.ariaDisabled)
let current = enabled.find(input => input.checked)
enabled.forEach(input => {
  input.addEventListener('change', (ev) => {
    if (ev.target.checked) current = ev.target
  })
})
disabled.forEach(input => {
  input.addEventListener('change', (ev) => {
    current.checked = true
  })
})
</script>
<LdSwitch
  legend="Chemical compound"
  name="food-type-web-component-single-element-aria-disabled"
>
  <LdSwitchItem value="water" checked>
    Water
  </LdSwitchItem>
  <LdSwitchItem value="alcohol">Alcohol</LdSwitchItem>
  <LdSwitchItem value="vampire" aria-disabled="true">Vampire</LdSwitchItem>
</LdSwitch>
Water Alcohol Vampire
Chemical compound

Properties #

Property Attribute Description Type Default
ariaDisabled aria-disabled Alternative disabled state that keeps element focusable string undefined
autofocus autofocus Automatically focus the form control when the page is loaded. boolean undefined
brandColor brand-color Defines switch custom color boolean undefined
disabled disabled Disabled state of the switch. boolean undefined
fitContent fit-content Make each switch item take up as little space as its content requires. boolean false
form form Associates the control with a form element. string undefined
key key for tracking the node's identity when working with lists string | number undefined
ldTabindex ld-tabindex Tab index of the input. number undefined
legend legend Defines a description of the contents of the switch component. string undefined
name name Used to specify the name of the control. string undefined
readonly readonly The value is not editable. boolean undefined
ref ref reference to component any undefined
required required Set this property to true in order to mark the switch as required. boolean undefined
size size Size of the switch. "lg" | "md" | "sm" undefined

Events #

Event Description Type
ldswitchchange Emitted with the value of the selected switch item. CustomEvent<string>

Methods #

focusInner() => Promise<void> #

Sets focus on the radio button.

Returns #

Type: Promise<void>

Shadow Parts #

Part Description
"fieldset" Container wrapping the legent element and the slot
"legend" The legend element

Built with StencilJS