Forms components
21 Forms components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: AddressInput, Checkbox, ChipGroup, Combobox, CountrySelect, CurrencyInput, Field, Form, InlineEdit, InputGroup, LimitsEditor, NativeSelect, OtpInput, PasswordInput, PhoneInput, RadioGroup, RelationPicker, Select, Slider, Switch, TagInput.
- AddressInputAddress form with cascading country, city and area comboboxes (searchable in English or Arabic), street and detail fields and an embedded PhoneInput. Places come from a pluggable LocationsDataSource, by default the CircleXO hub.
- CheckboxA box for choices applied on submit and for selecting rows. Supports an indeterminate state for "some selected".
- ChipGroupA single-select row of filter chips for categories or views; scrolls sideways on narrow screens instead of wrapping.
- ComboboxSearchable select for long lists, single or multiple (chips), with Arabic-aware filtering and an empty state. Wraps Base UI Combobox.
- CountrySelectSearchable country combobox with SVG flags and names in English or Arabic. The value is the ISO 3166-1 alpha-2 code. Uses PHONE_COUNTRIES or a LocationsDataSource.
- CurrencyInputMoney field whose value is an integer in minor units. The currency sets the decimals, Arabic and Western digits both parse, and the symbol sits where the locale puts it.
- FieldLabelled form field (label, control, description, error) built on Base UI Field, with the Nasaq text Input and Textarea.
- FormA form that wires errors to Nasaq fields by name, with useForm for values, validation, a pending submit and server errors mapped back onto fields, and FormField for label, control, description and error in one line.
- InlineEditText that turns into an input in place with Save and Cancel, async save, validation by type, and keyboard and focus handling.
- InputGroupAn input with leading and trailing addons (icon, text affix or button) inside one bordered control that matches Input height.
- LimitsEditorA per-resource limits form where each row is a number, Unlimited or Inherit, with optional price, overage price, per-key rate limit and spend cap, validation and change tracking.
- NativeSelectThe browser's own select, styled like Input, with options as data or as option/optgroup children, a placeholder, two sizes and the Field label, description and invalid state.
- OtpInputOne-time-code entry with N boxes; paste fills every box, Backspace steps back, digits stay left-to-right in RTL.
- PasswordInputPassword field built on InputGroup with a show/hide toggle (aria-pressed), an optional strength meter and an optional requirement checklist.
- PhoneInputPhone number field with a searchable country list (SVG flag, name in English or Arabic, calling code; Gulf and Arab countries first) and a digits input that groups the number as you type. The value is E.164.
- RadioGroupPick exactly one option from a short list, as plain radios or as bordered cards for plan-style choices.
- RelationPickerA field that points at another record and finds it by searching your API, storing ids and showing names, for one record or many, with create from typed text and loading, empty and error states.
- SelectPick one value from a short list. A Field-style trigger that opens a DropdownMenu-style list. Wraps Base UI Select.
- SliderDraggable single-value or range slider with marks, a Nasaq-formatted value label, disabled state and Field wiring. Wraps Base UI Slider.
- SwitchOn/off toggle for a setting that applies immediately; the thumb mirrors in RTL.
- TagInputChips inside an input box. Enter or comma adds, Backspace removes the last, paste splits on commas and new lines; supports maxTags, validation, suggestions, and Field.
SchemaRepeater
A Repeater whose rows are generated from a field schema (text, number, select, switch, date, nested repeater) with built-in validation in English and Arabic.
AddressInput
Address form with cascading country, city and area comboboxes (searchable in English or Arabic), street and detail fields and an embedded PhoneInput. Places come from a pluggable LocationsDataSource, by default the CircleXO hub.