Components / Forms

Form Controls

The input layer of the broadcast booth — HUD-grade fields, selects, toggles, sliders, and filter chips. Navy stages, teal focus glow, glass menus, and condensed display labels, wired for real keyboard focus and reduced-motion.

Scout the Board

Filter the athlete pool for this week's game desk.

5 active

Match on athlete name, team, or event.

Sport

Season

Level

VarsityJunior VarsityClub

Positions

Filter to the roles you're tracking.

Regions

Rating band

6288

Composite grade between 62 and 88.

Scouting note

6-8 UI

Text inputs

Navy.deep fields with a teal hairline that brightens on hover and a glowing teal ring on focus. Optional leading icons and a danger state for validation.

Default

With icon

Error

Enter a valid jersey number.

Sizes

Disabled

Textarea

6-8 UI

Select

A Radix Select in broadcast dress: a glass trigger with a flipping chevron, animated glass content, and a teal check on the selected row.

Placeholder

Disabled

6-8 UI

Slider & chips

A glowing teal slider for numeric bands — single or dual-thumb — and a row of toggleable broadcast chips for multi-select filters.

Single

Minimum grade70

Range

Chip filter

Selected: west

6-8 UI

Props

The core API surface. Every control is a cva + forwardRef component that forwards native and Radix props.

Prop	Type	Default	Description
Input.size	"sm" \| "md" \| "lg"	"md"	Field height and padding. Shared by Textarea.
Input.leftIcon / rightIcon	ReactNode	—	Icon pinned inside the field edge; tints teal on focus.
Input.error	boolean	false	Paints the danger state and sets aria-invalid.
Field.label / hint / error	ReactNode / ReactNode / string	—	Wraps a control with a Radix label and a hint or error line, wired via aria-describedby.
Checkbox.size / Switch.size / RadioGroupItem.size	"sm" \| "md" \| "lg"	"md"	Control footprint. Teal fill and glow when on.
Slider (Radix props)	value / defaultValue: number[]	—	Renders one glowing thumb per value; supports range and vertical orientation.
ChipFilter.options	{ value; label; icon?; disabled? }[]	—	The togglable chips to render.
ChipFilter.value / defaultValue	string[]	—	Controlled or uncontrolled selection.
ChipFilter.multiple	boolean	true	Allow more than one active chip.

Copy

import { Field } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { ChipFilter } from "@/components/ui/chip-filter";

<Field label="Search" hint="Name, team, or event.">
  <Input leftIcon={<Search />} placeholder="Search the board" />
</Field>

<ChipFilter
  options={positions}
  value={selected}
  onValueChange={setSelected}
/>