TicketSelector

molecules

Inline quantity stepper — − / number / +. Used in TicketTier and other contexts. Disabled when min/max reached.

ARIA Role: group

Demo

Demo for TicketSelector (molecules)

Inline quantity stepper — − / number / +. Used in TicketTier and other contexts. Disabled when min/max reached.

Props

Prop	Type	Required	Default	Description
`value`	`number`	Yes	`—`	min to max
`onChange`	`(value: number) => void`	Yes	`—`
`max`	`number`	Yes	`—`	>=0
`ariaLabel`	`string`	Yes	`—`

TypeScript Interface

interface TicketSelectorProps {
  value: number;
  onChange: (value: number) => void;
  min?: number;
  max: number;
  ariaLabel: string;
  size?: 'sm' | 'md' | 'lg';
}

Assertions (NASA Rule 5)

[type]value in [min, max] (NASA Rule 7)(NASA Rule 7)
[aria]role='group'; minus/plus buttons have aria-label='Decrease/Increase {ariaLabel}'(WCAG 4.1.2)

Usage

Import

import { Ticketselector } from '@epasslive/design-system'

Basic

<Ticketselector />

With Variants

<Ticketselector variant="primary" size="md" />