Live Field Demo
Interactive demos of every field type. Try them out, then click 'Show code' to see the data structure that produces each field.
Input Fields
textFormat: LastName FirstName
text (floating)text (minimal)emailnumber0/120
phoneE.164 format with country code
urldateSelect a date on or before 2010-12-31
textareaMax 500 characters
fileMax 5MB
Selection Fields
selectradio (list)radio (cards)checkbox (grid)toggleReceive updates about new features
rating1 = poor, 5 = excellent
slider0100--
0 to 100
Display Fields
dividerSection Break
info (callout)Important Notice
Please fill out all required fields before submitting. Your data is encrypted and will not be shared with third parties.
info (card)Privacy Policy
By submitting this form, you agree to our terms of service and privacy policy.
image
videodownloadVariants
Input fields support four visual variants. Here is the same text field in each:
default
boxed
minimal
floating
Sizes
Three sizes are available for input fields:
sm
md
lg