Skip to content
Design System
العربية

Form fields

import"@truvar-ai/design-system"

Form fields

Labels, help text and errors are wired to the input automatically, so screen readers announce them together.

Text field

Built on TextField

Shown to everyone on your team.
Use at least 3 characters so your team can find it.

Search field

Built on SearchField

Escape clears it; Enter submits.

Number field

Built on NumberField

Arrow keys and the buttons step the value. Currency and units follow the locale.

Between 1 and 500.

Phone number

Built on TextField + Select + Autocomplete

Flag and dialling code, formatting as you type, and clean-up of pasted numbers: spaces, dashes, brackets, a 00 prefix, “(0)”, tel: links and Arabic digits. A pasted +code switches the country. It always stores one format: +201002345678.

Paste any format. We tidy it up.
Try pasting:
Stored value—Not valid yet

Checkbox and switch

Built on Checkbox, Switch

Checkbox group

Built on CheckboxGroup

Send alerts by
Pick at least one.

Radio group

Built on RadioGroup

Report format

Radio cards

Built on RadioGroup + Radio

Same behaviour, bigger targets for important choices.

Plan

Slider and range

Built on Slider

80%
EGP 200K – EGP 1.2M

Setting rows

Built on SwitchField, CheckboxField, RadioField

A label plus a description, with the whole row clickable. The description is announced with the control.

Email a summary to the deal owner after every call.
Callers hear a short notice before recording starts.
Locked by your workspace admin.
Digits are replaced before anything is stored.
Required in many countries.
Slower speech for older callers.
Recommended for most calls.
Quicker answers for busy teams.

Prompt editor

Built on TokenField + TokenInput + Token

Text with inline variables, for agent greetings and prompts. Variables are single tokens: Backspace removes one whole, arrow keys step over it, copy and paste keep it.

First message
Hi ​First name​, this is ​Agent name​ from ​Company​. I'm calling about your open invoice.
Click where you want a variable, then use Insert variable.
Preview with sample data

Hi Nadia, this is Taysir from Nile Foods. I'm calling about your open invoice.

Form validation

Built on Form

Submit it empty: errors appear under each field and focus moves to the first one.