Pages
Introduction Colors & Tokens Icons
UI
Button Link Badge Notification Badge Alert Card Spinner Avatar Divider Empty State
Interactive
Modal Side Modal Dropdown Tooltip Accordion Tabs Flash Toast Support Button
Forms
Form Select Toggle Checkbox & Radio Text Fields Date & Time Fields
Layout
Navbar Sidebar Table Pagination Breadcrumbs Selector List
Utilities
Local Time
app_theme v1.39.1

Form

app_theme_form_with wraps Rails form_with with the themed FormBuilder — standard builder methods come out styled.

Full form

Name
Email
Role
Member
= app_theme_form_with(scope: :user, url: "#") do |f|
  = app_theme_form_group("Name") do
    = f.text_field :name, placeholder: "Ada Lovelace"
  = app_theme_form_group("Email") do
    = f.email_field :email, placeholder: "ada@example.com"
  = app_theme_form_group("Role") do
    = f.app_theme_select :role, [%w[Admin admin], %w[Member member]], selected: "member"
  = f.check_box :terms, label: "I agree to the terms", checked: false
  = f.app_theme_toggle :newsletter, label: "Subscribe to the newsletter", checked: true
  = app_theme_button "Save", type: :submit, variant: :primary

Form group with hint and error

Password *
At least 12 characters.
Username
Only letters and numbers are allowed.
.demo-stack
  = app_theme_form_group(required: true) do |group|
    - group.with_label do
      Password
    - group.with_input do
      = app_theme_text_field_tag :password, nil, type: :password
    - group.with_hint do
      At least 12 characters.
  = app_theme_form_group do |group|
    - group.with_label do
      Username
    - group.with_input do
      = app_theme_text_field_tag :username, "ada!"
    - group.with_error do
      Only letters and numbers are allowed.