Text Input

Area where user can enter small amount of text. Commonly used in forms.

Note: This kit does not handle form validation logic.


First Name
Last Name
Phone Number
Email Address
Zip Code

With Error

Email Address
Please enter a valid email address
Confirm Email Address

Text Input w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).


Custom Input


Last Name

Add On

Add On With Defaults
Right-Aligned Add On With Border
Right-Aligned Add On With No Border
Left-Aligned Add On With No Border
Left-Aligned Add On With Border


Hover Over Text Below

Things to Avoid

Do not use for large amounts of text (use Textarea instead). Avoid using a text input without validation if input is required and using with validation if not required.

UI Samples using Text Input Kit

Get the full picture. See how this kit is used in our samples.

Available Props

  • classname
  • dark
  • margin
  • margin_bottom
  • margin_left
  • margin_right
  • margin_top
  • margin_x
  • margin_y
  • max_width
  • padding
  • padding_bottom
  • padding_left
  • padding_right
  • padding_top
  • padding_x
  • padding_y
  • z_index
  • number_spacing
  • shadow
  • line_height
  • display
  • cursor
  • flex_direction
  • flex_wrap
  • justify_content
  • justify_self
  • align_items
  • align_content
  • align_self
  • flex
  • flex_grow
  • flex_shrink
  • order
  • id
  • data
  • aria
  • children
  • autocomplete
  • disabled
  • error
  • inline
  • input_options
  • label
  • name
  • placeholder
  • required
  • type
  • validation
  • value
  • add_on