Skip to content
SuperCoach

Components · Inputs

Input

Beta

A single-line text field, such as a client's name.

We send the program invite to this address.

When to use

  • For short free text and numbers: a client's name, an email, a target weight.
  • Always with a visible label.

When not to use

  • For long text such as coach notes: use a textarea.
  • To pick from a known list: use a Select, or a combobox when the list is long.
  • For dates: use the date picker.

Anatomy

In kilograms

  1. 1. Label: always visible, above the field
  2. 2. Field: border, background and focus ring
  3. 3. Help or error text, linked with aria-describedby

Variants

Inputs have one style. Combine them with an icon or a unit for common cases.

kcal
  • Search: a search icon at the start; the label can be visually hidden because the icon and placeholder make the purpose clear, but it stays in the markup.
  • With unit: kg, kcal, reps or a currency at the end, outside the value, announced through aria-describedby.

States

Enter at least 1 set.

StateWhat changesToken
Focus-visibleBorder and a 3px ringborder-ring, ring-ring/50
DisabledHalf opacity, not editableopacity-(--opacity-disabled)
InvalidRed border and ring, error text belowborder-destructive, ring-destructive/20, text-destructive-text
PlaceholderLighter texttext-muted-foreground

Usage guidelines

Do.A visible label above the field.
Don't.The placeholder as the only label. It disappears as soon as the coach types.
  • Size the field for the expected value: a weight field doesn't need full width.
  • Show the error after the coach leaves the field or submits, not on every keystroke.

Content guidelines

  • Labels are short nouns in sentence case: "Client email", not "Please enter the client's email".
  • Help text says what the value is used for or its format: "In kilograms".
  • Error text says how to fix it: "Enter at least 1 set", not "Invalid value".
  • Emails, URLs and phone numbers are typed left to right in Arabic too: set dir="ltr" on those inputs.

Accessibility

KeyDoes
TabMoves focus into the field
Shift+TabMoves focus out
  • Every input has a <Label htmlFor>. A screen reader announces "Client email, edit text, We send the program invite to this address".
  • Errors set aria-invalid="true" and are linked with aria-describedby, so they are read with the field.
  • Use the right type and inputMode (email, numeric) so phones show the right keyboard.

RTL

  • Text aligns to the start and the caret starts on the right.
  • Icons and units use start-3 and end-3 with ps-9 and pe-14, so they swap sides automatically.
  • Fields for emails, links and phone numbers stay left to right (dir="ltr").

Tokens used

Read from components/ui/input.tsx at build time, so this list changes when the component does. Opacity modifiers such as /90 are shadcn hover and focus tints on top of the token.

Semantic color tokens used by this component
TokenUtilitiesSuperCoachCoach
--destructiveborder-destructive ring-destructive/20red-600red-600
--foregroundtext-foregroundneutral-950neutral-950
--inputborder-inputneutral-200neutral-200
--muted-foregroundtext-muted-foregroundneutral-600neutral-600
--primarybg-primarybrand-600orange-500
--primary-foregroundtext-primary-foregroundwhitewhite
--ringborder-ring ring-ring/50brand-600orange-500
  • Opacityopacity-(--opacity-disabled)
  • Radiusrounded-md
  • Shadowshadow-xs
  • Typetext-base
  • Typefont-medium
  • Typetext-sm

Props

<Input>

Also takes every prop of <input>

No props of its own.

Replaces in coach-admin

From the read-only audit of coach-admin: 66 style values, 97 uses.

Classes and selectors

  • .form-control5
  • .form-control:focus4
  • .form-control[disabled]2
  • .form-control, .form-select2
  • .form-control-dark:focus2
  • .form-control:disabled1
  • .form-control:disabled, .form-control[readonly]1
  • .form-control:disabled, .form-control[readonly], .rw-widget-1
  • .form-control-dark1
  • .form-control:focus, .form-select:focus1

Files

  • src/reusableComponents/formComponents/input/input.scss50
  • src/reusableComponents/formComponents/input-with-unit/input-with-unit.scss32

The inventory lists the first 12 locations of each value, so file counts are a lower bound.

SCSS variables in these styles

  • $border-color→ --border
  • $light-primary-colornot a color: spacing, size or layout

Related

Select, Checkbox, Content.