Advanced form inputs
Rich inputs that follow the WAI-ARIA combobox, listbox, slider and grid patterns. They accept the same label, hint and error props as the core fields, so validation looks and sounds the same everywhere.
20 components on this page. Every demo is live — change the theme in the header or flip a demo to right-to-left with its RTL button. These components are React-only for now; Vue, Svelte and Angular versions are coming.
AutoComplete Link to AutoComplete
A combobox that suggests matches as you type, with single or multiple (chip) selection.
Selected: — · React, TypeScript
Code
ReactComing to Vue, Svelte and Angular.
const countries = [{ label: 'Jordan', value: 'jo' }, { label: 'Japan', value: 'jp' }];
<AutoComplete label="Country" suggestions={countries}
onSelect={(o) => setCountry(o.value)} placeholder="Start typing…" />
<AutoComplete label="Skills" multiple suggestions={skills}
selected={picked} onSelectionChange={setPicked} />MultiSelect Link to MultiSelect
A dropdown of checkable options with filter, select-all and chip display.
Value: amman, dubai
Code
ReactComing to Vue, Svelte and Angular.
<MultiSelect label="Cities" options={cities} value={value} onChange={setValue}
filter display="chip" showSelectAll maxSelectedLabels={3} />Listbox Link to Listbox
An always-visible list of options with single or multiple selection and filtering.
- GMT−5 · New York
- GMT+0 · London
- GMT+1 · Paris
- GMT+3 · Amman
- GMT+4 · Dubai
- GMT+9 · Tokyo
Timezone: gmt+3
Code
ReactComing to Vue, Svelte and Angular.
<Listbox label="Timezone" options={zones} value={zone} onChange={setZone} filter />CascadeSelect Link to CascadeSelect
Pick a leaf from nested groups — e.g. country, then state, then city.
Office: none
Code
ReactComing to Vue, Svelte and Angular.
<CascadeSelect label="Office" options={[
{ label: 'Jordan', children: [{ label: 'Amman', value: 'amm' }, { label: 'Irbid', value: 'irb' }] },
{ label: 'UAE', children: [{ label: 'Dubai', value: 'dxb' }] },
]} value={office} onChange={setOffice} />TreeSelect Link to TreeSelect
A dropdown containing a tree, for single or checkbox selection of hierarchical data.
Keys: tokens
Code
ReactComing to Vue, Svelte and Angular.
<TreeSelect label="Folders" nodes={folders} selectionMode="checkbox"
value={keys} onChange={setKeys} defaultExpandedKeys={['docs']} />InputNumber Link to InputNumber
Locale-aware numeric input with currency, percent, min/max and spin buttons.
Total: $3,750.00
Code
ReactComing to Vue, Svelte and Angular.
<InputNumber label="Price" mode="currency" currency="USD" value={price}
onChange={setPrice} min={0} showButtons />
<InputNumber label="Discount" mode="percent" value={0.15} maxFractionDigits={1} />InputMask Link to InputMask
Typed input that follows a pattern such as a phone number or card expiry.
Phone: incomplete
Code
ReactComing to Vue, Svelte and Angular.
<InputMask label="Phone" mask="(999) 999-9999" value={phone}
onChange={(raw, { complete }) => { setPhone(raw); setDone(complete); }} />InputOtp Link to InputOtp
One-time-code entry: one cell per character with an animated caret, grouping, SMS autofill, masking with reveal, a resend countdown and error / success states.
Code
ReactComing to Vue, Svelte and Angular.
<InputOtp label="Verification code" length={6} groups={[3, 3]} integerOnly
resendAfter={30} onResend={sendAgain} error={wrong ? 'That code did not match' : undefined}
onComplete={(code) => verify(code)} />Password Link to Password
Password field with a show/hide toggle, strength meter and requirement checklist.
- At least 8 characters (not met)
- A lowercase letter (not met)
- An uppercase letter (not met)
- A number (not met)
Code
ReactComing to Vue, Svelte and Angular.
<Password label="New password" autoComplete="new-password"
feedback toggleMask requirements value={pw} onChange={(e) => setPw(e.target.value)} />Rating Link to Rating
Star rating built on radio buttons, with an optional clear button.
Rating: 4 / 5
Code
ReactComing to Vue, Svelte and Angular.
<Rating label="Your rating" value={stars} onChange={setStars} cancel />Knob Link to Knob
A circular dial for picking a value in a range.
Code
ReactComing to Vue, Svelte and Angular.
<Knob label="Volume" value={volume} onChange={setVolume} valueTemplate="{value}%" />ColorPicker Link to ColorPicker
A full colour picker: saturation / brightness area, hue and opacity sliders, HEX · RGB · HSL · OKLCH entry, eyedropper, presets, recent colours and a WCAG contrast check.
Value: #5b34d6
Code
ReactComing to Vue, Svelte and Angular.
<ColorPicker label="Brand colour" value={color} onChange={setColor} alpha
contrastWith="#ffffff" presets={[{ value: '#5b34d6', label: 'Violet' }, { value: '#0f766e', label: 'Teal' }]} />DatePicker Link to DatePicker
Typed or calendar date entry with ranges, multiple dates, time and min/max limits.
October 2026
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
Trip: none
Code
ReactComing to Vue, Svelte and Angular.
<DatePicker label="Trip dates" selectionMode="range" value={range}
onChange={setRange} minDate={new Date()} showButtonBar />
<DatePicker label="Meeting" showTime value={when} onChange={setWhen} />ToggleButton Link to ToggleButton
A button that stays pressed, reporting aria-pressed.
Bold: not pressed
Code
ReactComing to Vue, Svelte and Angular.
<ToggleButton checked={bold} onChange={setBold} onLabel="Bold on" offLabel="Bold off" />SelectButton Link to SelectButton
A row of buttons acting as single or multiple choice.
Value: monthly · b
Code
ReactComing to Vue, Svelte and Angular.
<SelectButton label="Text style" multiple options={[
{ label: 'Bold', value: 'b' }, { label: 'Italic', value: 'i' }, { label: 'Underline', value: 'u' },
]} value={styles} onChange={setStyles} />FloatLabel Link to FloatLabel
A label that sits inside the field and floats above it on focus or when filled.
Code
ReactComing to Vue, Svelte and Angular.
<FloatLabel label="Username">
<input className="pl-input" value={user} onChange={(e) => setUser(e.target.value)} />
</FloatLabel>IftaLabel Link to IftaLabel
An "infield top-aligned" label that is always visible inside the top of the field.
Code
ReactComing to Vue, Svelte and Angular.
<IftaLabel label="Email">
<input className="pl-input" type="email" />
</IftaLabel>InputGroup Link to InputGroup
Joins addons (text, icons, buttons) to the sides of a field.
Code
ReactComing to Vue, Svelte and Angular.
<InputGroup>
<InputGroupAddon>https://</InputGroupAddon>
<input className="pl-input" aria-label="Website" />
<Button>Go</Button>
</InputGroup>IconField Link to IconField
Places a decorative icon inside a field, at the start or end.
Code
ReactComing to Vue, Svelte and Angular.
<IconField iconPosition="start">
<InputIcon>🔍</InputIcon>
<input className="pl-input" type="search" aria-label="Search" />
</IconField>KeyFilter Link to KeyFilter
Blocks characters that don’t match a pattern, both when typed and pasted.
Code
ReactComing to Vue, Svelte and Angular.
const digits = useKeyFilter('pint');
<Input label="Quantity" hint="Digits only" inputMode="numeric" {...digits} />