Form

Building Rails forms.

Requires JS

This component requires the form_field stimulus controller.

Anatomy

Form do |f|
  # Basic input
  f.input :name
  
  # Input with custom label and hint
  f.input :email do |input|
    input.label "Email Address"
    input.hint "We'll never share your email"
  end

  # Other form fields
  f.textarea :description
  f.checkbox :terms_accepted
  f.switch :notifications_enabled
  
  # Collection-based fields
  f.checkbox_group :interests, collection, value_method: :id, text_method: :name
  f.radio_group :size, sizes, value_method: :value, text_method: :label
  f.select :country, countries, value_method: :code, text_method: :name
  f.combobox :category, categories, value_method: :id, text_method: :title
  
  # Date and range inputs
  f.date_picker :birth_date
  f.date_range_picker :start_date, :end_date
  f.slider :rating, min: 1, max: 10
  
  # Submit button
  f.submit "Create Account"
end

API Reference

Form

Wrapper for form_with.

Name	Type	Default
`model:`	`object`	`false`
`loading:`	`boolean`	`false`
Whether to render a `LoadingButton`.

Form#input

Name	Type	Default
`method`	`symbol`	`nil`
Used for the input's name. If `model` is passed in, it will be used for building the input's name, value, and error message.
`type:`	`symbol`	`:text`
Input type (text, email, password, etc.)
`value:`	`string`	`nil`
If `model` is passed in, it will use `Model#method` as the value.
`label:`	`string`	`nil`
Label for the input. If `model` is passed in, it will render a label using Rails' label helper.
`hint:`	`string`	`nil`
Hint message to display below the input.
`error:`	`string`	`nil`
Error message to display below the input. If `model` is passed in, it will use `model.errors.full_messages_for(method)` as the error message.
`attributes`	`keyword arguments`

Form#textarea

Name	Type	Default
`method`	`symbol`	`nil`
Used for the textarea's name and value binding.
`value:`	`string`	`nil`
If `model` is passed in, it will use `Model#method` as the value.
`label:`	`string`	`nil`
`hint:`	`string`	`nil`
`error:`	`string`	`nil`
`attributes`	`keyword arguments`

Form#checkbox

Name	Type	Default
`method`	`symbol`	`nil`
`value:`	`string`	`"1"`
Value to submit when checked.
`checked:`	`boolean`	`nil`
Whether the checkbox is checked. Automatically determined from model if present.
`label:`	`string`	`nil`
`hint:`	`string`	`nil`
`error:`	`string`	`nil`
`attributes`	`keyword arguments`

Form#switch

Name	Type	Default
`method`	`symbol`	`nil`
`value:`	`string`	`"1"`
`checked:`	`boolean`	`nil`
Whether the switch is on. Automatically determined from model if present.
`label:`	`string`	`nil`

Form#checkbox_group

Name	Type	Default
`method`	`symbol`	`nil`
`collection`	`array`	`[]`
Collection of items to display as checkboxes.
`value_method:`	`symbol`
Method to call on each collection item for the checkbox value.
`text_method:`	`symbol`
Method to call on each collection item for the checkbox label.
`attributes`	`keyword arguments`

Form#radio_group

Name	Type	Default
`method`	`symbol`	`nil`
`collection`	`array`	`[]`
Collection of items to display as radio buttons.
`value_method:`	`symbol`
Method to call on each collection item for the radio value.
`text_method:`	`symbol`
Method to call on each collection item for the radio label.
`attributes`	`keyword arguments`

Form#select

Name	Type	Default
`method`	`symbol`	`nil`
`collection`	`array`	`[]`
Collection of items to display as options.
`value_method:`	`symbol`
Method to call on each collection item for the option value.
`text_method:`	`symbol`
Method to call on each collection item for the option text.
`disabled_items:`	`array`	`nil`
Array of values that should be disabled.
`attributes`	`keyword arguments`

Form#combobox

Name	Type	Default
`method`	`symbol`	`nil`
`collection`	`array`	`[]`
Collection of items to display as options.
`value_method:`	`symbol`
Method to call on each collection item for the option value.
`text_method:`	`symbol`
Method to call on each collection item for the option text.
`attributes`	`keyword arguments`

Form#date_picker

Name	Type	Default
`method`	`symbol`	`nil`
`value:`	`string/date`	`nil`
`label:`	`string`	`nil`
`hint:`	`string`	`nil`
`error:`	`string`	`nil`
`attributes`	`keyword arguments`

Form#date_range_picker

Name	Type	Default
`method`	`symbol`	`nil`
Method for the start date.
`end_method`	`symbol`	`nil`
Method for the end date.
`attributes`	`keyword arguments`

Form#slider

Name	Type	Default
`method`	`symbol`	`nil`
Method for single value or range start.
`end_method`	`symbol`	`nil`
Method for range end value (for range sliders).
`attributes`	`keyword arguments`

Form#submit

Submit button with loading state support.

Name	Type	Default
`value`	`string`	`nil`
Button text. Defaults to Rails' localized submit values (Create/Update Model).
`variant:`	`symbol`	`:default`
Button variant (default, destructive, outline, secondary, ghost, link).
`attributes`	`keyword arguments`

Examples

On This Page

Anatomy
API Reference
Examples

Getting Started

Components

Form

Anatomy

API Reference

Form

Form#input

Form#textarea

Form#checkbox

Form#switch

Form#checkbox_group

Form#radio_group

Form#select

Form#combobox

Form#date_picker

Form#date_range_picker

Form#slider

Form#submit

Examples