12.9.1

Form

The form kit provides consumers with a convenient, consistently styled <form> wrapper.

Form Helpers

This kit uses rails form_with with our custom builder to render forms using other kits such as text_input, select, and typeahead to name a few. Doing so provides UI consistency within forms and makes adding a form to your page easier.

Default


Default + Validation


Validation displays an error with red border and red text below indicating that the user must fill out the field.


Things to Avoid

Avoid using a form without validation if fields are required and using with validation if not required.

UI Samples using Form 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
  • form_system
  • form_system_options
  • options
  • validate