Inputs

Fields that light up when they're listening.
A recessed fill, a hairline, and a 4px ion ring on focus. Labels sit above; helper text below. The component owns all of it.
Workspace URLnorthwind.canvas.devVerification code482107
Input · States
type in the first
Input
Workspace name
Shown in the sidebar and on invoices.
Focused
With icon and shortcut
⌘K
Email
Disabled
<Input label="Workspace name"> · <Input error> · <Input disabled> · the message line is <Field>'s
Select · Textarea
live
Textarea
Select
InputOTP
Role
Notes
0 / 500
Markdown supported
One-time code
4
8
1
<Select label="Role" options={roles}> · <Textarea rows={3} maxLength={500}> · <InputOTP length={6}>
Input · addons · affordances
live
TextInput
Workspace URL
https://
.canvas.app
Email
Password
Search tokens
<Input prefix="https://" suffix=".canvas.app"> · leadingIcon · passwordToggle · clearable · small · large · raw <TextInput> stays unskinned
Autocomplete · Listbox
type to filter
Autocomplete
Listbox
Runtime
Notify me about
<Autocomplete> searchable single-select · <Listbox> rich rows that stay on screen, single or multi
PhoneInput · Field
label · control · message
PhoneInput
Field
Mobile
+1
Region
Where tokens and assets are stored.
Contact email
<PhoneInput> flag · caret · dial code · <Field> adds the one message line no control owns
FilterPanel
rail · sheet on phone
FilterPanel
Filters
Status
Team
<FilterPanel> grouped checkbox options · count badges · Clear header · counts light up once checked
Form · two-column · titled sections · actions
↵ submits
Form
Workspace
Shown to everyone you invite, on invoices and in the sidebar.
Name
URL
canvas.app/
Region
Fiscal year starts
Description
Members
Defaults for people who join from an invite link.
Allow guests
Guests see only the boards they are added to.
Default role
↵
to save
esc
to discard
<Form> + <FormSection> · stacked or two-column · titled sections · submit and cancel row · ↵ submits · you stitch the fields inside