Lily Design System™

DialGroup

A dial group is a container for multiple dial components, providing semantic grouping for related rotary controls. Dial groups are used when several dials need to be presented and operated together, such as audio mixing controls or multi-parameter adjustments.

This headless component uses a <div> element with role="group" and an aria-label to provide accessible grouping semantics for the contained dial components.

Example

30
70
Show demo markup 
<div class="dial-group"><div class="dial" role="slider" aria-valuenow="30" aria-label="Bass">30</div><div class="dial" role="slider" aria-valuenow="70" aria-label="Treble">70</div></div>
Usage example 
<DialGroup label="Audio controls">
  <Dial label="Volume" value={volume} min={0} max={100} />
  <Dial label="Bass" value={bass} min={0} max={100} />
  <Dial label="Treble" value={treble} min={0} max={100} />
</DialGroup>
Show Svelte source 
// In your Svelte component:
import DialGroup from "lily-design-system-svelte-headless/components/DialGroup/DialGroup.svelte";

<DialGroup>
  <!-- list children -->
</DialGroup>

Usage

Audio mixer with volume, bass, and treble controls:

<DialGroup label="Audio controls">
  <Dial label="Volume" value={volume} min={0} max={100} />
  <Dial label="Bass" value={bass} min={0} max={100} />
  <Dial label="Treble" value={treble} min={0} max={100} />
</DialGroup>

HVAC control panel:

<DialGroup label="Climate controls">
  <Dial label="Temperature" value={temperature} min={16} max={30} step={0.5} />
  <Dial label="Fan speed" value={fanSpeed} min={1} max={5} />
</DialGroup>

Props

  • label: string (required) -- accessible label for the dial group
  • children: slot -- dial components
  • ...restProps: Any additional HTML attributes

Keyboard Interactions

  • None at the group level -- individual dials handle their own keyboard interactions

ARIA

  • role="group" -- semantically groups the contained dials
  • aria-label -- describes the purpose of the group

When to Use

  • Use to group multiple dial controls together, such as an audio mixer or multi-parameter control panel.
  • Use when multiple dials share a common purpose and should be perceived as a group by assistive technology.
  • Use for equalizer interfaces, multi-channel audio controls, or multi-axis configuration panels.

When Not to Use

  • Do not use for a single dial -- render Dial directly without a group wrapper.
  • Do not use for linear slider groups -- use multiple Slider components instead.

Headless

This component provides role="group" with aria-label for accessible grouping, with zero visual styling. The consumer is responsible for all CSS including layout direction, spacing, alignment, and responsive behavior.

Styles

The consumer provides all CSS styling. The component renders with a .dial-group class for targeting. No default styles are included -- this is a fully headless component.

Testing

  • Verify the component renders a <div> element with class dial-group
  • Verify role="group" is present
  • Verify aria-label is applied
  • Verify child dial components are rendered
  • Verify pass-through attributes are applied

Advice

  • Designers: Arrange dials in a logical order that reflects their relationship. Use consistent sizing and spacing within the group.
  • Developers: Always provide a descriptive label prop that conveys the group's purpose to screen readers.

Implementation Notes

  • Uses <div> element with role="group" to semantically group dials
  • aria-label describes the group purpose
  • Renders child dial components in source order
  • Consumer controls layout and spacing via CSS

Composition

DialGroup is a container for Dial components.

Related components

  • dial — a rotary dial control for selecting a value
  • slider — a draggable control for selecting a value along a track

References

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: dial-group
  • PascalCase: DialGroup
  • Description: a group of dial components
  • Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
  • HTML tag: <div>
  • CSS class: .dial-group
  • Interactive: no

ARIA

  • role="group" -- semantically groups the contained dials
  • aria-label -- describes the purpose of the group

Keyboard

  • None at the group level -- individual dials handle their own keyboard interactions

Props

  • label: string (required) -- accessible label for the dial group
  • children: slot -- dial components
  • ...restProps: Any additional HTML attributes