Input Components
Input components collect values for a submission or for conditional logic elsewhere in the doc.
Shared input props
Prop⇅
Type⇅
Notes⇅
id
string
Stable component ID for conditions and persistence.
name
string
Submitted field name.
label
string
User-facing field label.
value
string, number, or expression
Initial value.
required
boolean
Requires a value before submit.
visibleWhen
expression
Optional conditional visibility.
requiredWhen
expression
Conditionally required.
disabledWhen
expression
Conditionally disabled.
Text and TextArea
Use Input.Text for short answers and Input.TextArea for longer writing.
*
<Input.Text
id="inputs-text"
name="fullName"
label="Full name"
placeholder="Ada Lovelace"
value=""
required
/>
<Input.TextArea
id="inputs-textarea"
name="notes"
label="Notes"
placeholder="Write a short note"
rows={4}
value=""
/>
Select, Dropdown, and Checklist
Use Input.Select for visible choices, Input.Dropdown for compact choices, and Input.Checklist for multiple selections.
Email
SMS
In app
<Input.Select
id="inputs-select"
name="priority"
label="Priority"
options={["Low", "Medium", "High"]}
value="Medium"
/>
<Input.Dropdown
id="inputs-dropdown"
name="department"
label="Department"
options={["Product", "Design", "Engineering"]}
value="Product"
/>
<Input.Checklist
id="inputs-checklist"
name="channels"
label="Channels"
options={["Email", "SMS", "In app"]}
value={["Email"]}
/>
Date and numeric inputs
Use Input.Date for dates, Input.Number for direct numeric entry, Input.Slider for ranges, and Input.Counter for small increments.
75
3
<Input.Date
id="inputs-date"
name="startDate"
label="Start date"
placeholder="2026-06-11"
value=""
/>
<Input.Number
id="inputs-number"
name="quantity"
label="Quantity"
minimum={1}
maximum={10}
value={2}
/>
<Input.Slider
id="inputs-slider"
name="confidence"
label="Confidence"
minimum={0}
maximum={100}
value={75}
/>
<Input.Counter
id="inputs-counter"
name="attendees"
label="Attendees"
minimum={1}
maximum={12}
value={3}
/>
Rating, Signature, and Upload
Use Input.Rating for scores, Input.Signature for acknowledgement, and Input.Upload for file, image, video, or audio upload fields.
Uploaded file
<Input.Rating
id="inputs-rating"
name="rating"
label="Rate this guide"
stars={5}
value={4}
/>
<Input.Signature
id="inputs-signature"
name="signature"
label="Signature"
value=""
/>
<Input.Upload
id="inputs-upload"
name="attachment"
label="Attach a file"
mediaType="File"
value={[]}
/>