Special input fields

Phone numbers with country, card details, one-time codes, file uploads, profile pictures and signatures.

6 components · 20 variants

Switch category

On this page

Every component of this category. Pick one to jump to its variants.

Avatar picker4
Card input4
Phone input4
Signature pad4
File upload2
One-time code2

avatar-picker

Avatar picker

The picture for a profile. Frame a photo with drag, zoom and keys, make an avatar from initials, choose from a set, or change it from a compact settings row.

Frame a photo
Initials
Choose from a set
Settings row

Props and details

Frame a photo

A round window over the photo, drag to place it, zoom with the slider, the wheel or + and -, arrows nudge it. Thirds appear while you frame, small previews follow, the framing goes to the server.

Installv1.0.0

aiw add @ai-website/avatar-picker

Brings along utils, kit, icon, avatar, dropdown-menu, slider

Usage

<AvatarPicker name="Elif Aydın" image={<img src={photo} alt="" />} onFramingChange={setFraming} onSave={save} />

Source

Initials

Initials from the name on a color that keeps white text readable, round or square, so no photo is needed. Three sizes show it as it will appear.

Installv1.0.0

aiw add @ai-website/avatar-picker

Brings along utils, kit, icon, avatar, dropdown-menu, slider

Usage

<AvatarPicker variant="initials" name="Jonas Weber" defaultShape="circle" />

Source

Choose from a set

A set of pictures as a radio group, arrows move in rows and columns. The chosen one springs into the preview.

Installv1.0.0

aiw add @ai-website/avatar-picker

Brings along utils, kit, icon, avatar, dropdown-menu, slider

Usage

<AvatarPicker variant="gallery" name="Lea Hoffmann" options={pictures} defaultSelected={2} />

Source

Settings row

The current picture with name and email. Its menu uploads a photo, switches to initials or removes the picture.

Installv1.0.0

aiw add @ai-website/avatar-picker

Brings along utils, kit, icon, avatar, dropdown-menu, slider

Usage

<AvatarPicker variant="inline" name="Mara Lindqvist" description="mara@example.com" image={<img … />} />

Source

card-input

Card input

Card number, expiry and security code with grouping, a Luhn check, auto advance and clear messages, without network names or logos.

One line
Stacked
Card preview
Saved cards

Props and details

One line

Number, expiry and code in one line, the last two slide in once the number is there. On phones two rows in one box. The pay button wakes up when everything checks out.

Installv1.0.0

aiw add @ai-website/card-input

Brings along utils, kit, icon, input, checkbox

Usage

<CardInput label="Card" onValueChange={(card) => setComplete(card.complete)} />

Source

Stacked

Each part with its own label, the name below, an option to keep the card. A complete number draws a check, Backspace in an empty part goes back to the one before.

Installv1.0.0

aiw add @ai-website/card-input

Brings along utils, kit, icon, input, checkbox

Usage

<CardInput variant="stacked" withName rememberOption />

Source

Card preview

A drawn card follows every key, the expiry lights up while you type it, and the card turns over for the security code on the back.

Installv1.0.0

aiw add @ai-website/card-input

Brings along utils, kit, icon, input, checkbox

Usage

<CardInput variant="preview" withName />

Source

Saved cards

Cards on file as choices with the last digits and expiry, the default marked. A new card unfolds its fields with a soft height.

Installv1.0.0

aiw add @ai-website/card-input

Brings along utils, kit, icon, input, checkbox

Usage

<CardInput variant="saved" savedCards={[{ id: "c1", last4: "4821", expiry: "08/29", isDefault: true }]} />

Source

phone-input

Phone input

A phone number with its country, without flags. Grouped as you type in the habit of the country, given back in E.164, with a searchable country list.

Country and number
Finds the country
Two fields
Send a code

Props and details

Country and number

Country and number in one box. The list searches names, codes and dialling codes, a leading 0 is dropped, a pasted +41 picks Switzerland, a complete number draws a check.

Installv1.0.0

aiw add @ai-website/phone-input

Brings along utils, kit, icon, input, select, popover

Usage

<PhoneInput label="Phone" defaultCountry="DE" preferred={["DE", "AT", "CH"]} />

Source

Finds the country

One field for people who type the number in full. The + and the dialling code set the country, its code springs in at the start, and the rest groups itself.

Installv1.0.0

aiw add @ai-website/phone-input

Brings along utils, kit, icon, input, select, popover

Usage

<PhoneInput variant="detect" label="Phone for the courier" />

Source

Two fields

Dialling code and number side by side as two controls, for long forms where every field stands on its own. The favourites lead the list.

Installv1.0.0

aiw add @ai-website/phone-input

Brings along utils, kit, icon, input, select, popover

Usage

<PhoneInput variant="split" label="Mobile" optional preferred={["GB", "IE", "US"]} />

Source

Send a code

A send button that wakes up once the number is complete, a short wait, then a countdown line before it can send again. Here the code field follows and confirms the phone.

Installv1.0.0

aiw add @ai-website/phone-input

Brings along utils, kit, icon, input, select, popover

Usage

<PhoneInput variant="verify" label="Mobile" onSendCode={(number) => api.sendCode(number)} />

Source

signature-pad

Signature pad

A signature drawn with finger, pen or mouse, ink that breathes with the speed, undo and clear, typing as the keyboard alternative, and SVG as the value.

Draw
Contract
Initials
Field with dialog

Props and details

Draw

The pad with a dashed line, undo the last stroke or clear it all. Draw or type, the confirm button wakes up once there is a signature.

Installv1.0.0

aiw add @ai-website/signature-pad

Brings along utils, kit, icon, popover

Usage

<SignaturePad label="Signature" signer="Noor Haddad" onChange={(v) => setSignature(v.svg)} />

Source

Contract

Terms to read in their own scroll area, a box to agree, then the signature. A missing step is named, once signed the ink draws itself again with date and name.

Installv1.0.0

aiw add @ai-website/signature-pad

Brings along utils, kit, icon, popover

Usage

<SignaturePad variant="contract" label="Studio lease" terms={paragraphs} agreeLabel="I have read the lease" signer="Lea Hoffmann" onSign={send} />

Source

Initials

A small pad per section for initials, each row turns green with a check, a bar counts how many are done.

Installv1.0.0

aiw add @ai-website/signature-pad

Brings along utils, kit, icon, popover

Usage

<SignaturePad variant="initials" label="Initial each section" sections={["Rent and deposit", "Kiln times", …]} />

Source

Field with dialog

A field in the form that opens a large pad. Phones get a sheet from below, larger screens a dialog, and the focus stays inside. The signature then sits small in the field.

Installv1.0.0

aiw add @ai-website/signature-pad

Brings along utils, kit, icon, popover

Usage

<SignaturePad variant="dialog" label="Signature" signer="Sami Brandt" onSign={(v) => setSignature(v.svg)} />

Source

file-upload

File upload

A dropzone with a file list: progress, done and failed, with checks for type, size and count.

Dropzone
Compact

Props and details

Dropzone

Drag files in or open the picker with the keyboard. The edge runs while a file hovers, each bar fills, a finished file draws its check. Retry restarts the failed one.

Installv1.0.1

aiw add @ai-website/file-upload

Brings along utils, kit, icon, input

Usage

<FileUpload label="Attachments" accept=".pdf,image/*" maxSize={10e6} multiple onFiles={upload} />

Source

Compact

One button and a line of rules, for a single file in a longer form.

Installv1.0.1

aiw add @ai-website/file-upload

Brings along utils, kit, icon, input

Usage

<FileUpload variant="compact" multiple={false} label="CV" accept=".pdf" />

Source

otp-input

One-time code

Separate slots on one real input: paste, SMS autofill and backspace work as people expect.

Verify
States

Props and details

Verify

Six digits in two groups, inside a sign-in card. Each digit pops into its slot, a wrong code shakes, the right one sends a green wave.

Installv1.0.0

aiw add @ai-website/otp-input

Brings along utils, kit, input, icon

Usage

<OtpInput length={6} groups={[3, 3]} onComplete={verify} />

Source

States

Empty, wrong and accepted, plus a short PIN.

Installv1.0.0

aiw add @ai-website/otp-input

Brings along utils, kit, input, icon

Usage

<OtpInput error="This code is not right." />  <OtpInput success hint="Code accepted" />

Source

Similar components

More from Elements, the same area of the kit.

Often combined with

Sections that usually sit next to Special input fields on a page.

Copied to the clipboard