Form controls
Pole, výběry a stepper. Primární textové pole AjemFIT má floating label (používáme skoro všude) — startuje jako placeholder a vyplave nahoru. Pole generují jedno id (useId) pro aria. Hairline ring, brand focus ring, error stav.
Text inputy
Primární pole AjemFIT (skoro všude) — floating label startuje jako placeholder a vyplave nahoru při fokusu nebo vyplnění. Textarea drží label nad polem.
Ikona & addon
Leading ikona (hledání), trailing addon (Kč), heslo s přepínačem zobrazení.
Velikosti
md (default) · lg pro hero formuláře.
Stavy
Focus = brand ring + label zezelená (vyzkoušej Tab). Error = červený ring + label + hláška. Disabled ztlumené.
Zadej platné telefonní číslo.
Select
Nativní select + chevron, label nad polem. className jde na wrapper.
Segmentový přepínač
Pill přepínač mezi možnostmi — předplatné, příchuť, varianta.
Volby
Checkbox (výplň + ✓), Radio (bílé bg + barevný ring + tečka), Switch.
Výběrové karty
Radio jako karty — výběr balení / předplatného. Celá karta se zvýrazní (sage tint + brand ring).
Posuvník
Nativní range s brand accentem a živou hodnotou — dávkování, filtr ceny.
Quantity stepper
− [n] + pro množství v košíku. Klikatelné, clampuje na min/max.
Props & pravidla
<FloatingField> — výchozí input
components/ui/floating-field.tsx| Prop | Typ | Default | Použití |
|---|---|---|---|
| label | string | — | Plovoucí popisek (povinné) |
| icon | LucideIcon | — | Leading ikona |
| suffix | ReactNode | — | Trailing addon (Kč / tlačítko) |
| inputSize | "md" | "lg" | "md" | Výška pole |
| error / hint | string | — | Chyba (červený) / nápověda |
| …input props | — | — | type, defaultValue, onChange… |
Výběr & posuvník
components/ui/{segmented-control,choice-card,range-slider}.tsx| Prop | Typ | Default | Použití |
|---|---|---|---|
| SegmentedControl options | { value, label }[] | — | Pill přepínač (controlled/uncontrolled) |
| ChoiceCard type / title / addon | "radio" | "checkbox" · ReactNode | "radio" | Výběrová karta |
| RangeSlider min / max / step / unit | number · string | — | Posuvník + živá hodnota |
| PasswordField | — | — | Heslo s přepínačem zobrazení (oko) |
<Field> — label nad polem (Select / Textarea)
components/ui/field.tsx| Prop | Typ | Default | Použití |
|---|---|---|---|
| label | ReactNode | — | Popisek nad polem |
| hint / error | ReactNode | — | Nápověda / chyba pod polem |
| required | boolean | false | Hvězdička u labelu |
| children | ReactElement | — | Vnitřní control (id se vloží) |
Select & volby
components/ui/{select,choice}.tsx| Prop | Typ | Default | Použití |
|---|---|---|---|
| Select inputSize | "sm" | "md" | "lg" | "md" | 36 / 44 / 52px |
| Checkbox / Radio / Switch label | ReactNode | — | Inline popisek (label obaluje input) |
| QuantityStepper value / defaultValue | number | 1 | Controlled / uncontrolled + min/max |
- Primární textový input = floating label (
FloatingField, skoro všude). Label obaluje input (přístupný název + klik-fokus), float čistě přes CSS (peer + :placeholder-shown). - Statický label nad polem (
Field) jen pro Select a Textarea, kde floating nedává smysl. - Focus = 2px brand ring + label zezelená; error = červený ring + hláška. Vždy hairline ring.