Skip to content
Forms — Component Gallery
AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px)
SketchMaterialiOSTamagui
DataInjectionKeyPatternsServiceTransactionProcessResearchProductQualityPerformanceSpecDomainFunctionTechnologyArchitectureConfigMiddlewareDataDatabaseDrizzleMigrationModelop-sqliteSchemaSQLState ManagementDraftKeystoneMergePatchPatchesPersistenceReactiveRedoStoreUndoTestingDeviceFactoryIsolationTypeScriptZodTopicsCommunicationBidsNVCDesignDesign ImplicationsEducationPedagogyFoundationsPsychologyAttachmentFloodingRelatingAuthentic RelatingUIEditorReact Native

Forms — Component Gallery

Checkbox

Checkbox States

StatesSizes
States
View DSL Source 
stack(gap="sm")
  checkbox Unchecked
  checkbox(checked) Checked
  checkbox(indeterminate) Indeterminate
  checkbox(disabled) Disabled
Sizes
View DSL Source 
stack(gap="sm")
  checkbox(size="small") Small
  checkbox(size="medium") Medium
  checkbox(size="large") Large

Color-picker

Color Picker Formats

FormatsFeatures
Formats
View DSL Source 
row(gap="md" align="start")
  color-picker(label="Hex" format="hex")
  color-picker(label="RGB" format="rgb")
  color-picker(label="HSL" format="hsl")
Features
View DSL Source 
row(gap="md" align="start")
  color-picker(label="With opacity" opacity)
  color-picker(label="With swatches" swatches="#f00; #0f0; #00f; #ff0")

Input

Input Types

TypesOptionsSizes
Types
View DSL Source 
stack(gap="sm")
  input(label="Text" type="text")
  input(label="Email" type="email")
  input(label="Date" type="date")
  input(label="Number" type="number")
Options
View DSL Source 
stack(gap="sm")
  input(label="With clear" with-clear placeholder="Type something")
  input(label="Password" type="password" password-toggle)
  input(label="Required" required)
  input(label="Disabled" disabled)
Sizes
View DSL Source 
stack(gap="sm")
  input(label="Small" size="small")
  input(label="Medium" size="medium")
  input(label="Large" size="large")

Otp-field

OTP Verification

4-Digit6-Digit (Secure)
4-Digit
View DSL Source 
stack(gap="md")
  otp-field(label="Enter Verification Code" length=4 message="We sent a code to your phone")
6-Digit (Secure)
View DSL Source 
stack(gap="md")
  otp-field(label="Security PIN" length=6 secure=true message="Enter your secondary PIN")

Radio

Radio States

StatesSizes
States
View DSL Source 
radio-group(label="States" name="states" value="active")
  radio(value="active") Active
  radio(value="disabled" disabled) Disabled
Sizes
View DSL Source 
radio-group(label="Sizes" name="sizes" value="md")
  radio(value="sm" size="small") Small
  radio(value="md" size="medium") Medium
  radio(value="lg" size="large") Large

Radio-group

Radio Group Vertical

VerticalHorizontal
Vertical
View DSL Source 
radio-group(label="Pick one" name="vert" value="A")
  radio(value="A") Option A
  radio(value="B") Option B
  radio(value="C") Option C
Horizontal
View DSL Source 
radio-group(label="Pick one" name="horiz" value="A" orientation="horizontal")
  radio(value="A") A
  radio(value="B") B
  radio(value="C") C

Rating

Rating Values

ValuesSizesPrecisionReadonlyDisabled
Values
View DSL Source 
stack(gap="sm")
  rating(label="1 star" value=1)
  rating(label="2 stars" value=2)
  rating(label="3 stars" value=3)
  rating(label="4 stars" value=4)
  rating(label="5 stars" value=5)
Sizes
View DSL Source 
stack(gap="sm")
  rating(label="Small" size="small" value=3)
  rating(label="Medium" size="medium" value=3)
  rating(label="Large" size="large" value=3)
Precision
View DSL Source 
stack(gap="sm")
  rating(label="Half star 1.5" precision=0.5 value=1.5)
  rating(label="Half star 2.5" precision=0.5 value=2.5)
  rating(label="Half star 3.5" precision=0.5 value=3.5)
Readonly
View DSL Source 
stack(gap="sm")
  rating(label="5-star readonly" readonly value=4)
  rating(label="10-star readonly" max=10 readonly value=7)
Disabled
View DSL Source 
stack(gap="sm")
  rating(label="Disabled rating" disabled value=3)

Segmented

Segmented Control

Options
Options
View DSL Source 
stack(gap="md")
  segmented(options="Private,Shared" value="Private")
  segmented(options="Day,Week,Month" value="Week")

Select

Select Dropdown

StandardOpen DropdownFilteringAdaptive (Sheet)
Standard
View DSL Source 
stack(gap="md")
  select(label="Country" options="United States, Canada, Mexico" value="Canada")
  select(label="Disabled" options="One, Two" disabled=true placeholder="Not selectable")
Open Dropdown
View DSL Source 
stack(gap="md")
  select(label="Region" options="Europe, Americas, Asia, Oceania" open=true)
Adaptive (Sheet)
View DSL Source 
stack(gap="md")
  select(label="Select Option" options="A, B, C, D" open=true adaptive=true)

Slider

Slider Basic

BasicRangeTooltipMarkers
Basic
View DSL Source 
stack(gap="md")
  slider(label="Volume" min=0 max=100 value=50)
  slider(label="Brightness" min=0 max=100 value=75)
Range
View DSL Source 
slider(label="Price range" range min=0 max=100 min-value=20 max-value=80)
Tooltip
View DSL Source 
slider(label="Quality" with-tooltip min=0 max=100 value=65)
Markers
View DSL Source 
slider(label="Steps" with-markers min=0 max=10 value=4)

Switch

Switch States

StatesDisabled
States
View DSL Source 
stack(gap="sm")
  switch Off state
  switch(checked) On state
Disabled
View DSL Source 
stack(gap="sm")
  switch(disabled) Disabled off
  switch(checked disabled) Disabled on

Textarea

Textarea Basic

BasicOptionsSizes
Basic
View DSL Source 
stack(gap="sm")
  textarea(label="Comments" placeholder="Enter your comments…")
  textarea(label="Notes" rows=6)
Options
View DSL Source 
stack(gap="sm")
  textarea(label="With character count" with-count)
  textarea(label="Disabled" disabled)
  textarea(label="Required" required)
Sizes
View DSL Source 
stack(gap="sm")
  textarea(label="Small" size="small")
  textarea(label="Medium" size="medium")
  textarea(label="Large" size="large")
DSL Reference