Controls

Specifically styled versions of elements for use in controlling components such as carousels.

Pips

Pip indicators provide an accessible way to navigate between items in a carousel or similar component. They use native radio inputs styled to provide a visual indicator of the current selection.

The pip indicators are built using native HTML radio inputs, providing built-in accessibility and state management without JavaScript. Each pip expands when selected and includes proper ARIA labels for screen readers.

Preview Code

Copy

Show item 1 of 6 Show item 2 of 6 Show item 3 of 6 Show item 4 of 6 Show item 5 of 6 Show item 6 of 6

<div
  class="control-pip-wrapper"
  role="radiogroup"
  aria-label="Item navigation"
  aria-description="Use arrow keys to navigate between items"
>
  <label class="control-pip-label">
    <input
      type="radio"
      name="item-navigation"
      class="control-pip"
      checked
      aria-current="true"
      aria-controls="item-1"
      aria-label="Show item 1 of 6"
    />
    <span class="sr-only">Show item 1 of 6</span>
  </label>

  <label class="control-pip-label">
    <input
      type="radio"
      name="item-navigation"
      class="control-pip"
      aria-controls="item-2"
      aria-label="Show item 2 of 6"
    />
    <span class="sr-only">Show item 2 of 6</span>
  </label>

  <label class="control-pip-label">
    <input
      type="radio"
      name="item-navigation"
      class="control-pip"
      aria-controls="item-3"
      aria-label="Show item 3 of 6"
    />
    <span class="sr-only">Show item 3 of 6</span>
  </label>

  <label class="control-pip-label">
    <input
      type="radio"
      name="item-navigation"
      class="control-pip"
      aria-controls="item-4"
      aria-label="Show item 4 of 6"
    />
    <span class="sr-only">Show item 4 of 6</span>
  </label>

  <label class="control-pip-label">
    <input
      type="radio"
      name="item-navigation"
      class="control-pip"
      aria-controls="item-5"
      aria-label="Show item 5 of 6"
    />
    <span class="sr-only">Show item 5 of 6</span>
  </label>

  <label class="control-pip-label">
    <input
      type="radio"
      name="item-navigation"
      class="control-pip"
      aria-controls="item-6"
      aria-label="Show item 6 of 6"
    />
    <span class="sr-only">Show item 6 of 6</span>
  </label>
</div>

<div
  class="control-pip-wrapper"
  role="radiogroup"
  aria-label="Item navigation"
  aria-description="Use arrow keys to navigate between items"
>
  <label class="control-pip-label">
    <input
      type="radio"
      name="item-navigation"
      class="control-pip"
      checked
      aria-current="true"
      aria-controls="item-1"
      aria-label="Show item 1 of 6"
    />
    <span class="sr-only">Show item 1 of 6</span>
  </label>

  <label class="control-pip-label">
    <input
      type="radio"
      name="item-navigation"
      class="control-pip"
      aria-controls="item-2"
      aria-label="Show item 2 of 6"
    />
    <span class="sr-only">Show item 2 of 6</span>
  </label>

  <label class="control-pip-label">
    <input
      type="radio"
      name="item-navigation"
      class="control-pip"
      aria-controls="item-3"
      aria-label="Show item 3 of 6"
    />
    <span class="sr-only">Show item 3 of 6</span>
  </label>

  <label class="control-pip-label">
    <input
      type="radio"
      name="item-navigation"
      class="control-pip"
      aria-controls="item-4"
      aria-label="Show item 4 of 6"
    />
    <span class="sr-only">Show item 4 of 6</span>
  </label>

  <label class="control-pip-label">
    <input
      type="radio"
      name="item-navigation"
      class="control-pip"
      aria-controls="item-5"
      aria-label="Show item 5 of 6"
    />
    <span class="sr-only">Show item 5 of 6</span>
  </label>

  <label class="control-pip-label">
    <input
      type="radio"
      name="item-navigation"
      class="control-pip"
      aria-controls="item-6"
      aria-label="Show item 6 of 6"
    />
    <span class="sr-only">Show item 6 of 6</span>
  </label>
</div>

CSS Variables

Variable	Default Value	Description
--control-pip-wrapper-padding	1rem	Padding around the pip container
--control-pip-wrapper-margin	0	Margin around the pip container
--control-pip-wrapper-min-height	48px	Minimum height of the pip container
--control-pip-wrapper-background	transparent	Background color of the pip container
--control-pip-wrapper-border-radius	var(--radius-none)	Border radius of the pip container
--control-pip-size	12px	Size of individual pip indicators
--control-pip-gap	8px	Space between pip indicators
--control-pip-active-width	36px	Width of the active pip indicator
--control-pip-color	var(--color-neutral-300)	Default color of pip indicators
--control-pip-active-color	var(--color-primary-700)	Color of the active pip indicator
--control-pip-hover-color	var(--color-primary-700)	Color of pip indicators on hover
--control-pip-focus-ring-width	2px	Width of the focus ring
--control-pip-focus-ring-offset	2px	Offset of the focus ring
--control-pip-focus-ring-color	var(--color-primary-700)	Color of the focus ring
--control-pip-focus-ring-style	solid	Style of the focus ring
--control-pip-disabled-background	var(--color-neutral-300)	Background color of disabled pips
--control-pip-hover-scale	1.1	Scale factor for pip hover effect
--control-pip-disabled-opacity	0.5	Opacity of disabled pip indicators
--control-pip-active-transition	width var(--duration-speed-quick) ease, background-color var(--duration-speed-quick) ease	Transition for active state
--control-pip-hover-transition	transform var(--duration-speed-quick) ease	Transition for hover state
--control-pip-wrapper-mobile-padding	0.5rem	Padding around pip container on mobile
--control-pip-mobile-size	10px	Size of pip indicators on mobile
--control-pip-mobile-active-width	30px	Width of active pip indicator on mobile

Accessibility

Implemented Accessibility Features

• Complete keyboard navigation support through native radio controls
• Semantic structure using radiogroup role
• Clear descriptive labels for navigation (“Show item X of Y”)
• Purpose description via aria-description for keyboard usage
• Screen reader context through sr-only class
• Visual focus indicators through native radio states
• Proper use of semantic HTML with <label> elements
• Current state indication through native radio checked state
• Content relationships via aria-controls
• Touch-friendly target sizes through label wrapping
• Motion-respecting animations using prefers-reduced-motion
• Consistent naming patterns across all controls

Accessibility Considerations when Implementing

• Ensure radio input names are unique per instance
• Match aria-controls values with corresponding content IDs
• Maintain proper tab order matching visual presentation
• Consider auto-advance pause on focus/hover
• Handle dynamic content updates appropriately
• Maintain state synchronization between controls and content

Control Buttons

Specifically styled buttons to provide clear and identifiable site controls.

Basic Control Button

The control-btn class can be applied along side the btn class (see Button Component).

Preview Code

Copy

<button class="btn control-btn">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
  >
    <path d="M4 4L20 12L4 20" fill="black" />
  </svg>
</button>

<button class="btn control-btn">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
  >
    <path d="M4 4L20 12L4 20" fill="black" />
  </svg>
</button>

CSS Variables

Variable	Default Value	Description
--control-btn-background	var(--color-white)	Background color of control buttons
--control-btn-color	var(--color-primary)	Color of control button icons
--control-btn-hover-color	var(--color-primary-darker)	Color of control button icons on hover
--control-btn-active-color	var(--color-primary-darker)	Color of control button icons when active
--control-btn-background-hover	var(--color-neutral-200)	Background color on hover
--control-btn-background-active	var(--color-neutral-300)	Background color when active
--control-btn-border-width	1px	Width of control button border
--control-btn-size	48px	Size of control buttons
--control-btn-shadow	var(--shadow-default)	Default shadow for control buttons
--control-btn-shadow-hover	var(--shadow-hover)	Shadow on hover for control buttons
--control-btn-shadow-active	var(--shadow-active)	Shadow when active for control buttons
--control-btn-radius	var(--radius-none)	Border radius of control buttons
--control-btn-outline-color	var(--color-primary-700)	Border color of control buttons

Combined Control Buttons

Horizontal Bar

When using multiple control buttons, they can be wrapped in a control-bar. This ensure uniform borders between buttons, creating a cohesive collection of control buttons.

Preview Code

Copy

<div class="control-bar">
  <button class="btn control-btn">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
    >
      <path
        d="M15.6099 18L17 16.6371L12.7802 12.5L17 8.36289L15.6099 7L10 12.5L15.6099 18Z"
        fill="black"
      />
      <path d="M9 7H7V18H9V7Z" fill="black" />
    </svg>
  </button>
  <button class="btn control-btn">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
    >
      <path
        d="M15 16.1371L13.6099 17.5L8 12L13.6099 6.5L15 7.86289L10.7802 12L15 16.1371Z"
        fill="black"
      />
    </svg>
  </button>
  <button class="btn control-btn">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
    >
      <path d="M4 4L20 12L4 20" fill="black" />
    </svg>
  </button>
  <button class="btn control-btn">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
    >
      <path
        d="M9 16.1371L13.2198 12L9 7.86289L10.3901 6.5L16 12L10.3901 17.5L9 16.1371Z"
        fill="black"
      />
    </svg>
  </button>
  <button class="btn control-btn">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
    >
      <path
        d="M8.39012 18L7 16.6371L11.2198 12.5L7 8.36289L8.39012 7L14 12.5L8.39012 18Z"
        fill="black"
      />
      <path d="M15 7H17V18H15V7Z" fill="black" />
    </svg>
  </button>
</div>

<div class="control-bar">
  <button class="btn control-btn">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
    >
      <path
        d="M15.6099 18L17 16.6371L12.7802 12.5L17 8.36289L15.6099 7L10 12.5L15.6099 18Z"
        fill="black"
      />
      <path d="M9 7H7V18H9V7Z" fill="black" />
    </svg>
  </button>
  <button class="btn control-btn">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
    >
      <path
        d="M15 16.1371L13.6099 17.5L8 12L13.6099 6.5L15 7.86289L10.7802 12L15 16.1371Z"
        fill="black"
      />
    </svg>
  </button>
  <button class="btn control-btn">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
    >
      <path d="M4 4L20 12L4 20" fill="black" />
    </svg>
  </button>
  <button class="btn control-btn">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
    >
      <path
        d="M9 16.1371L13.2198 12L9 7.86289L10.3901 6.5L16 12L10.3901 17.5L9 16.1371Z"
        fill="black"
      />
    </svg>
  </button>
  <button class="btn control-btn">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
    >
      <path
        d="M8.39012 18L7 16.6371L11.2198 12.5L7 8.36289L8.39012 7L14 12.5L8.39012 18Z"
        fill="black"
      />
      <path d="M15 7H17V18H15V7Z" fill="black" />
    </svg>
  </button>
</div>

Vertical Bar

The control-bar-vertical class can be used instead if a vertical control bar is desired.

Preview Code

Copy

<div class="control-bar-vertical">
  <button class="btn control-btn">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
    >
      <path
        d="M15.6099 18L17 16.6371L12.7802 12.5L17 8.36289L15.6099 7L10 12.5L15.6099 18Z"
        fill="black"
      />
      <path d="M9 7H7V18H9V7Z" fill="black" />
    </svg>
  </button>
  <button class="btn control-btn">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
    >
      <path
        d="M15 16.1371L13.6099 17.5L8 12L13.6099 6.5L15 7.86289L10.7802 12L15 16.1371Z"
        fill="black"
      />
    </svg>
  </button>
  <button class="btn control-btn">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
    >
      <path d="M4 4L20 12L4 20" fill="black" />
    </svg>
  </button>
  <button class="btn control-btn">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
    >
      <path
        d="M9 16.1371L13.2198 12L9 7.86289L10.3901 6.5L16 12L10.3901 17.5L9 16.1371Z"
        fill="black"
      />
    </svg>
  </button>
  <button class="btn control-btn">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
    >
      <path
        d="M8.39012 18L7 16.6371L11.2198 12.5L7 8.36289L8.39012 7L14 12.5L8.39012 18Z"
        fill="black"
      />
      <path d="M15 7H17V18H15V7Z" fill="black" />
    </svg>
  </button>
</div>

<div class="control-bar-vertical">
  <button class="btn control-btn">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
    >
      <path
        d="M15.6099 18L17 16.6371L12.7802 12.5L17 8.36289L15.6099 7L10 12.5L15.6099 18Z"
        fill="black"
      />
      <path d="M9 7H7V18H9V7Z" fill="black" />
    </svg>
  </button>
  <button class="btn control-btn">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
    >
      <path
        d="M15 16.1371L13.6099 17.5L8 12L13.6099 6.5L15 7.86289L10.7802 12L15 16.1371Z"
        fill="black"
      />
    </svg>
  </button>
  <button class="btn control-btn">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
    >
      <path d="M4 4L20 12L4 20" fill="black" />
    </svg>
  </button>
  <button class="btn control-btn">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
    >
      <path
        d="M9 16.1371L13.2198 12L9 7.86289L10.3901 6.5L16 12L10.3901 17.5L9 16.1371Z"
        fill="black"
      />
    </svg>
  </button>
  <button class="btn control-btn">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
    >
      <path
        d="M8.39012 18L7 16.6371L11.2198 12.5L7 8.36289L8.39012 7L14 12.5L8.39012 18Z"
        fill="black"
      />
      <path d="M15 7H17V18H15V7Z" fill="black" />
    </svg>
  </button>
</div>

CSS Variables

Variable	Default Value	Description
--control-btn-item-gap	0rem	Gap between control buttons