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
Forms
Form Select Toggle Checkbox & Radio Text Fields Date & Time Fields
Layout
Navbar Sidebar Table Pagination Breadcrumbs Selector List
Utilities
Local Time

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.