Input

We can only accept numbers in this field
Markup
<Input />
<Input 
  label="Email" 
  value="inva lid-email@example.com" 
  type="email" />
<Input 
  label="Password" 
  type="password" />
<Input
  label="Number of things"
  type="number"
  value="314"
  help="We can only accept numbers in this field" />
Custom CSS Properties
--input-label-color
--input-label-font-size
--input-padding
--input-font-size
--input-font-family
--input-background-color
--input-disabled-background
--input-border-radius
--input-border-width
--input-border-color
--input-border-color-active
Props
Title Value
class string
type "text" | "email" | "number"
size "xs" | "sm" | "lg" | "xl"
density "tight" | "loose"
label string
help string
defaultValue string
16 px
Base size on small viewports
1.125
Ratio between steps for small viewports
22 px
Base size on larger viewports
1.333
Ratio between steps for larger viewports