railsui 3.1.4 → 3.2.0

data/app/views/railsui/themes/corgie/forms/_input_group.html.erb

@@ -0,0 +1,485 @@
+<%### input w/ label %>
+<div id="input-group-with-label">
+  <%= render layout: example, locals: { heading: "Input with label", section: "Input Group" } do %>
+
+<%= render preview('neutral') do %>
+  <div class="form-group mb-0 font-tiktok">
+    <label for="email" class="form-label">Email</label>
+    <input type="email" class="form-input" placeholder="john.doe@example.com" aria-label="Email">
+  </div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div class="form-group">
+  <label for="email" class="form-label">Email</label>
+  <input type="email" class="form-input" placeholder="john.doe@example.com" aria-label="Email">
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<!-- ActionView::Helpers::FormHelper -->
+<%%= form_with model: @form do |f| %>
+  <div class="form-group">
+    <%%= f.label :email, class: "form-label" %>
+    <%%= f.email_field :email, class: "form-input", placeholder: "john.doe@example.com", "aria-label": "Email" %>
+  </div>
+  <%%= f.submit class: "btn btn-primary" %>
+<%% end %>
+
+<!-- Railsui::FormBuilder -->
+<%%= form_with model: @form, builder: Railsui::FormBuilder do |f| %>
+  <%%= f.email_field :email, label: "Email", placeholder: "john.doe@example.com" %>
+  <%%= f.submit %>
+<%% end %>
+<% end %>
+
+<%= render_snippet active_tab: :erb %>
+<% end %>
+<% end %>
+</div>
+
+  <%### input w/ label + help text %>
+  <%= divider %>
+
+<div id="input-group-with-help-text">
+<%= render layout: example, locals: { heading: "Input with label and help text" } do %>
+
+<%= render preview('neutral') do %>
+<div class="form-group mb-0 font-tiktok">
+<label for="email" class="form-label">Email</label>
+<input type="email" class="form-input" placeholder="john.doe@example.com" aria-label="Email">
+<p class="form-help">This text helps you, right?</p>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div class="form-group">
+  <label for="email" class="form-label">Email</label>
+  <input type="email" class="form-input" placeholder="john.doe@example.com" aria-label="Email">
+  <p class="form-help">This text helps you, right?</p>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<!-- ActionView::Helpers::FormHelper -->
+<%%= form_with model: @form do |f| %>
+  <div class="form-group">
+    <%%= f.label :email, class: "form-label" %>
+    <%%= f.email_field :email, class: "form-input", placeholder: "john.doe@example.com", "aria-label": "Email" %>
+    <p class="form-help">This text helps you, right?</p>
+  </div>
+  <%%= f.submit class: "btn btn-primary" %>
+<%% end %>
+
+<!-- Railsui::FormBuilder -->
+<%%= form_with model: @form, builder: Railsui::FormBuilder do |f| %>
+  <%%= f.email_field :email, label: "Email", placeholder: "john.doe@example.com", help: "This text helps you, right?" %>
+  <%%= f.submit %>
+<%% end %>
+<% end %>
+
+<%= render_snippet active_tab: :erb %>
+<% end %>
+<% end %>
+</div>
+
+    <%#### Input with dynamic error messages %>
+<%= divider %>
+
+<div id="input-group-with-dynamic-errors">
+<%= render layout: example, locals: { heading: "Input with dynamic error messages", section: "Input Group" } do %>
+
+<span class="rounded-full bg-yellow-300 px-2 py-0.5 text-xs text-black font-medium">JavaScript</span> or <span class="rounded-full bg-teal-300 text-black px-2 py-0.5 text-xs font-medium">Turbo</span> required.
+
+<div class="prose dark:prose-invert my-6 max-w-full">
+<p>Add the class <code>.form-input-error</code> dynamically to display an invalid state. The icon and helper text is hidden by default but is displayed when the class gets appended.</p>
+<p>Read the <%= link_to "Icon documentation", systems_icons_path, class: "text-neutral-800 underline hover:text-neutral-900 font-medium dark:text-neutral-200 dark:hover:text-neutral-100", target: :_blank %> for the <code>icon</code> view helper as shown in the following snippet(s).</p>
+</div>
+
+<%= render preview('neutral') do %>
+<div class="form-group relative mb-0 font-tiktok">
+  <input type="email" class="form-input form-input-error pr-10" placeholder="john.doe@example.com" aria-label="Email" value="john.doe@">
+
+  <%= icon "exclamation-circle", class: "hidden size-5 text-red-600 dark:text-red-400 absolute right-3 top-3" %>
+  <p class="hidden mt-1 text-sm text-red-700 dark:text-red-400">Please enter a valid email</p>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<%# .html %>
+<% content_for :html, flush: true do %>
+<div class="form-group relative">
+  <input type="email" class="form-input form-input-error pr-10" placeholder="john.doe@example.com" aria-label="Email">
+  <%%= icon "exclamation-circle", class: "hidden size-5 text-red-600 dark:text-red-400 absolute right-3 top-3" %>
+  <p class="hidden mt-1 text-sm text-red-700 dark:text-red-400">Please enter a valid email</p>
+</div>
+<% end %>
+
+<%# .erb %>
+<% content_for :erb, flush: true do %>
+<!-- ActionView::Helpers::FormTagHelper -->
+<div class="form-group relative">
+  <%%= email_field_tag "email", nil, class: "form-input form-input-error pr-10", placeholder: "Email", "aria-label": "Email" %>
+  <%%= icon "exclamation-circle", class: "hidden size-5 text-red-600 dark:text-red-400 absolute right-3 top-3" %>
+  <p class="hidden mt-1 text-sm text-red-700 dark:text-red-400">Please enter a valid email</p>
+</div>
+
+<!-- ActionView::Helpers::FormHelper -->
+<%%= form_with model: @form do |f| %>
+  <div class="form-group relative">
+    <%%= f.email_field :email, class: "form-input form-input-error pr-10", placeholder: "Email", "aria-label": "Email" %>
+    <%%= icon "exclamation-circle", class: "hidden size-5 text-red-600 dark:text-red-400 absolute right-3 top-3" %>
+    <p class="hidden mt-1 text-sm text-red-700 dark:text-red-400">Please enter a valid email</p>
+  </div>
+  <%%= f.submit class: "btn btn-primary" %>
+<%% end %>
+
+<!-- Railsui::FormBuilder -->
+<!-- Note: FormBuilder automatically handles error states when model validations fail -->
+<%%= form_with model: @form, builder: Railsui::FormBuilder do |f| %>
+  <%%= f.email_field :email, label: "Email", placeholder: "Email" %>
+  <%%= f.submit %>
+<%% end %>
+<% end %>
+
+  <%= render_snippet active_tab: :erb %>
+<% end %>
+<% end %>
+</div>
+
+      <%#### Input with browser-based error messages %>
+      <%= divider %>
+
+<div id="input-group-with-browser-errors">
+<%= render layout: example, locals: { heading: "Input with browser-based error messages" } do %>
+
+<div class="prose dark:prose-invert my-6 max-w-full">
+<p>Most modern browsers have invalid properties and states you can customize the design for. This type of validation uses those in lieu of reaching for JavaScript.</p>
+</div>
+
+<%= render preview('neutral') do %>
+<div class="form-group mb-0 font-tiktok">
+  <label for="email" class="form-label">Email</label>
+  <div class="relative">
+    <input type="email" class="form-input peer pr-10 invalid:border-red-700 invalid:text-red-700 invalid:ring-red-50 dark:invalid:border-red-400 dark:invalid:text-red-400 dark:invalid:ring-red-50/10" placeholder="john.doe@example.com" aria-label="Email" value="john.doe@">
+
+      <%= icon "exclamation-circle", class:  "size-5 stroke-current text-red-700 dark:text-red-400 absolute right-3 top-3 invisible peer-invalid:visible" %>
+    <p class="mt-1 text-sm text-red-700 dark:text-red-400 invisible peer-invalid:visible">Please enter a valid email</p>
+</div>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<%# .html %>
+<% content_for :html, flush: true do %>
+<div class="form-group">
+  <label for="email" class="form-label">Email</label>
+  <div class="relative">
+    <input type="email" class="form-input peer pr-10 invalid:border-red-700 invalid:text-red-700 invalid:ring-red-50 dark:invalid:border-red-400 dark:invalid:text-red-400 dark:invalid:ring-red-50/10" placeholder="john.doe@example.com" aria-label="Email" value="john.doe@">
+
+    <%%= icon "exclamation-circle", class:  "size-5 stroke-current text-red-700 dark:text-red-400 absolute right-3 top-3 invisible peer-invalid:visible" %>
+    <p class="mt-1 text-sm text-red-700 dark:text-red-400 invisible peer-invalid:visible">Please enter a valid email</p>
+  </div>
+</div>
+<% end %>
+
+<%# .erb %>
+<% content_for :erb, flush: true do %>
+<!-- ActionView::Helpers::FormTagHelper -->
+<div class="form-group">
+<%%= label_tag "email", "Email", class: "form-label" %>
+<div class="relative">
+  <%%= email_field_tag "email", "john.doe@", class: "form-input peer pr-10 invalid:border-red-700 invalid:text-red-700 invalid:ring-red-50 dark:invalid:border-red-400 dark:invalid:text-red-400 dark:invalid:ring-red-50/10", placeholder: "john.doe@example.com", "aria-label": "Email" %>
+
+  <%%= icon "exclamation-circle", class:  "size-5 stroke-current text-red-700 dark:text-red-400 absolute right-3 top-3 invisible peer-invalid:visible" %>
+  <p class="mt-1 text-sm text-red-700 dark:text-red-400 invisible peer-invalid:visible">Please enter a valid email</p>
+</div>
+</div>
+
+<!-- ActionView::Helpers::FormHelper -->
+<%%= form_with model: @form do |f| %>
+  <div class="form-group">
+    <%%= f.label :email, class: "form-label" %>
+    <div class="relative">
+      <%%= f.email_field :email, class: "form-input peer pr-10 invalid:border-red-700 invalid:text-red-700 invalid:ring-red-50 dark:invalid:border-red-400 dark:invalid:text-red-400 dark:invalid:ring-red-50/10", placeholder: "john.doe@example.com", "aria-label": "Email" %>
+      <%%= icon "exclamation-circle", class: "size-5 stroke-current text-red-700 dark:text-red-400 absolute right-3 top-3 invisible peer-invalid:visible" %>
+      <p class="mt-1 text-sm text-red-700 dark:text-red-400 invisible peer-invalid:visible">Please enter a valid email</p>
+    </div>
+  </div>
+  <%%= f.submit class: "btn btn-primary" %>
+<%% end %>
+
+<!-- Railsui::FormBuilder -->
+<!-- Note: For browser validation, use class option to add peer and invalid classes -->
+<%%= form_with model: @form, builder: Railsui::FormBuilder do |f| %>
+  <%%= f.email_field :email, label: "Email", placeholder: "john.doe@example.com", class: "peer invalid:border-red-700 invalid:text-red-700 invalid:ring-red-50 dark:invalid:border-red-400 dark:invalid:text-red-400 dark:invalid:ring-red-50/10" %>
+  <%%= f.submit %>
+<%% end %>
+<% end %>
+
+<%= render_snippet active_tab: :erb %>
+<% end %>
+<% end %>
+</div>
+
+<%### disabled input w/ label %>
+<%= divider %>
+
+<div id="input-group-disabled-with-label">
+<%= render layout: example, locals: { heading: "Disabled input with label", section: "Input Group" } do %>
+
+<div class="prose prose-neutral dark:prose-invert mb-6">
+<p>Adding a <code>disabled</code> attribute to the input field will automatically style disabled inputs</p>
+</div>
+
+<%= render preview('neutral') do %>
+<div class="form-group mb-0 font-tiktok">
+  <label for="email" class="form-label">Email</label>
+  <input type="email" class="form-input" placeholder="john.doe@example.com" aria-label="Email" disabled>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div class="form-group">
+  <label for="email" class="form-label">Email</label>
+  <input type="email" class="form-input" placeholder="john.doe@example.com" aria-label="Email" disabled>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<!-- ActionView::Helpers::FormHelper -->
+<%%= form_with model: @form do |f| %>
+  <div class="form-group">
+    <%%= f.label :email, class: "form-label" %>
+    <%%= f.email_field :email, class: "form-input", placeholder: "john.doe@example.com", "aria-label": "Email", disabled: true %>
+  </div>
+  <%%= f.submit class: "btn btn-primary" %>
+<%% end %>
+
+<!-- Railsui::FormBuilder -->
+<%%= form_with model: @form, builder: Railsui::FormBuilder do |f| %>
+  <%%= f.email_field :email, label: "Email", placeholder: "john.doe@example.com", disabled: true %>
+  <%%= f.submit %>
+<%% end %>
+<% end %>
+
+<%= render_snippet active_tab: :erb %>
+<% end %>
+<% end %>
+</div>
+
+<%### Input with add-on %>
+<%= divider %>
+
+<div id="input-group-with-add-on">
+<%= render layout: example, locals: { heading: "Input with add-on" } do %>
+
+<div class="prose prose-neutral dark:prose-invert mb-6 max-w-full">
+<p>Using custom offsets you can add an add-on to the beginning or end of an input. Modify the <code>w-[40px]</code> class of the add-on to account for its content. Do the same for the input padding <code>pl-[90px]</code> to adjust offset proportionally.</p>
+</div>
+
+<%= render preview('neutral') do %>
+<div class="form-group mb-0 font-tiktok">
+  <label for="website" class="form-label">Website</label>
+  <div class="relative">
+    <div class="absolute left-px border-r border-neutral-300 top-px bg-neutral-100 dark:bg-neutral-700/80 dark:border-neutral-700 dark:text-neutral-200 h-[36px] text-base rounded-l-md flex items-center justify-center px-3 text-neutral-700 select-none">https://</div>
+    <input type="text" id="website" class="form-input pl-[90px]" placeholder="example.com" aria-label="Website">
+  </div>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div class="form-group">
+  <label for="website" class="form-label">Website</label>
+  <div class="relative">
+    <div class="absolute left-px border-r border-neutral-300 top-px bg-neutral-100 dark:bg-neutral-700/80 dark:border-neutral-700 dark:text-neutral-200 h-[36px] text-base rounded-l-md flex items-center justify-center px-3 text-neutral-700 select-none">https://</div>
+    <input type="text" id="website" class="form-input pl-[90px]" placeholder="example.com" aria-label="Website">
+  </div>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<!-- ActionView::Helpers::FormHelper -->
+<%%= form_with model: @form do |f| %>
+  <div class="form-group">
+    <%%= f.label :website, class: "form-label" %>
+    <div class="relative">
+      <div class="absolute left-px border-r border-neutral-300 top-px bg-neutral-100 dark:bg-neutral-700/80 dark:border-neutral-700 dark:text-neutral-200 h-[36px] text-base rounded-l-md flex items-center justify-center px-3 text-neutral-700 select-none">https://</div>
+      <%%= f.text_field :website, class: "form-input pl-[90px]", placeholder: "example.com", "aria-label": "Website" %>
+    </div>
+  </div>
+  <%%= f.submit class: "btn btn-primary" %>
+<%% end %>
+
+<!-- Railsui::FormBuilder -->
+<!-- Note: For add-ons, use wrapper option and skip_label to customize structure -->
+<%%= form_with model: @form, builder: Railsui::FormBuilder do |f| %>
+  <%%= f.form_group do %>
+    <%%= f.label :website, "Website" %>
+    <div class="relative">
+      <div class="absolute left-px border-r border-neutral-300 top-px bg-neutral-100 dark:bg-neutral-700/80 dark:border-neutral-700 dark:text-neutral-200 h-[36px] text-base rounded-l-md flex items-center justify-center px-3 text-neutral-700 select-none">https://</div>
+      <%%= f.text_field :website, class: "pl-[90px]", placeholder: "example.com", skip_label: true %>
+    </div>
+  <%% end %>
+  <%%= f.submit %>
+<%% end %>
+<% end %>
+
+  <%= render_snippet active_tab: :erb %>
+<% end %>
+<% end %>
+</div>
+
+<%### Input with leading inline and trailing add-ons %>
+<%= divider %>
+
+<div id="input-group-with-leading-inline-and-trailing-add-ons">
+<%= render layout: example, locals: { heading: "Input with leading inline and trailing add-ons", section: "Input Group" } do %>
+
+<%= render preview('neutral') do %>
+  <div class="form-group mb-0 font-tiktok">
+    <label for="amount" class="form-label">Enter amount</label>
+    <div class="relative">
+      <span class="absolute left-3 top-[7px] text-neutral-500 dark:text-neutral-400">$</span>
+      <input type="text" id="amount" class="form-input pl-7" placeholder="5.00" aria-label="Website">
+      <span class="absolute right-3 top-2.5 text-neutral-500 text-sm dark:text-neutral-400">USD</span>
+    </div>
+  </div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div class="form-group">
+  <label for="amount" class="form-label">Enter amount</label>
+  <div class="relative">
+    <span class="absolute left-3 top-[7px] text-neutral-500 dark:text-neutral-400">$</span>
+    <input type="text" id="amount" class="form-input pl-7" placeholder="5.00" aria-label="Enter amount">
+    <span class="absolute right-3 top-2.5 text-neutral-500 dark:text-neutral-400 text-sm">USD</span>
+  </div>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<!-- ActionView::Helpers::FormHelper -->
+<%%= form_with model: @form do |f| %>
+  <div class="form-group">
+    <%%= f.label :amount, "Enter amount", class: "form-label" %>
+    <div class="relative">
+      <span class="absolute left-3 top-[7px] text-neutral-500 dark:text-neutral-400">$</span>
+      <%%= f.text_field :amount, class: "form-input pl-7", placeholder: "5.00", "aria-label": "Enter amount" %>
+      <span class="absolute right-3 top-2.5 text-neutral-500 dark:text-neutral-400 text-sm">USD</span>
+    </div>
+  </div>
+  <%%= f.submit class: "btn btn-primary" %>
+<%% end %>
+
+<!-- Railsui::FormBuilder -->
+<%%= form_with model: @form, builder: Railsui::FormBuilder do |f| %>
+  <%%= f.form_group do %>
+    <%%= f.label :amount, "Enter amount" %>
+    <div class="relative">
+      <span class="absolute left-3 top-[7px] text-neutral-500 dark:text-neutral-400">$</span>
+      <%%= f.text_field :amount, class: "pl-7", placeholder: "5.00", skip_label: true %>
+      <span class="absolute right-3 top-2.5 text-neutral-500 dark:text-neutral-400 text-sm">USD</span>
+    </div>
+  <%% end %>
+  <%%= f.submit %>
+<%% end %>
+<% end %>
+
+    <%= render_snippet active_tab: :erb %>
+  <% end %>
+<% end %>
+</div>
+
+<%### Input with add-on and trailing button %>
+<%= divider %>
+
+<div id="input-group-with-add-on-and-trailing-button">
+<%= render layout: example, locals: { heading: "Input with add-on and trailing button", section: "Input Group" } do %>
+
+<%= render preview('neutral') do %>
+<div class="form-group mb-0 font-tiktok">
+  <label for="users" class="form-label">Search users</label>
+  <div class="relative">
+    <%= icon "users", class:  "size-4 text-neutral-500 absolute left-3 top-3" %>
+    <input type="search" id="users" class="form-input pl-9" placeholder="John Doe" aria-label="Search users" />
+    <button type="submit" class="btn btn-ghost rounded-md absolute h-6 w-8 top-[7px] right-1.5">
+      <span class="sr-only">Search</span>
+      <%= icon "magnifying-glass", class: "size-5 text-neutral-500 shrink-0" %>
+    </button>
+  </div>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div class="form-group">
+  <label for="users" class="form-label">Search users</label>
+  <div class="relative">
+    <%%= icon "users", class: "size-4 text-neutral-500 absolute left-3 top-3" %>
+    <input type="search" id="users" class="form-input pl-9" placeholder="John Doe" aria-label="Search users" />
+    <button type="submit" class="btn btn-ghost rounded-md absolute h-6 w-8 top-[7px] right-1.5">
+      <span class="sr-only">Search</span>
+      <%%= icon "magnifying-glass", class: "size-5 text-neutral-500 shrink-0" %>
+    </button>
+  </div>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<!-- ActionView::Helpers::FormHelper -->
+<%%= form_with model: @form do |f| %>
+  <div class="form-group">
+    <%%= f.label :users, "Search users", class: "form-label" %>
+    <div class="relative">
+      <%%= icon "users", class: "size-4 text-neutral-500 absolute left-3 top-3" %>
+      <%%= f.search_field :users, class: "form-input pl-9", placeholder: "John Doe", "aria-label": "Search users" %>
+      <button type="submit" class="btn btn-ghost rounded-md absolute h-6 w-8 top-[7px] right-1.5">
+        <span class="sr-only">Search</span>
+        <%%= icon "magnifying-glass", class: "size-5 text-neutral-500 shrink-0" %>
+      </button>
+    </div>
+  </div>
+  <%%= f.submit class: "btn btn-primary" %>
+<%% end %>
+
+<!-- Railsui::FormBuilder -->
+<%%= form_with model: @form, builder: Railsui::FormBuilder do |f| %>
+  <%%= f.form_group do %>
+    <%%= f.label :users, "Search users" %>
+    <div class="relative">
+      <%%= icon "users", class: "size-4 text-neutral-500 absolute left-3 top-3" %>
+      <%%= f.search_field :users, class: "pl-9", placeholder: "John Doe", skip_label: true %>
+      <button type="submit" class="btn btn-ghost rounded-md absolute h-6 w-8 top-[7px] right-1.5">
+        <span class="sr-only">Search</span>
+        <%%= icon "magnifying-glass", class: "size-5 text-neutral-500 shrink-0" %>
+      </button>
+    </div>
+  <%% end %>
+<%% end %>
+<% end %>
+
+<%= render_snippet active_tab: :erb %>
+<% end %>
+<% end %>
+</div>
+
+<%= system_pagination(prev_path: systems_forms_input_path, prev_text: "Input", next_path: systems_forms_select_path, next_text: "Select") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Input with label", "#input-group-with-label" %>
+    <%= component_link "Input with label and help text", "#input-group-with-help-text" %>
+    <%= component_link "Input with dynamic errors", "#input-group-with-dynamic-errors" %>
+    <%= component_link "Input with browser errors", "#input-group-with-browser-errors" %>
+    <%= component_link "Disabled input with label", "#input-group-disabled-with-label" %>
+    <%= component_link "Input with add-on", "#input-group-with-add-on" %>
+    <%= component_link "Input with leading inline and trailing add-ons", "#input-group-with-leading-inline-and-trailing-add-ons" %>
+    <%= component_link "Input with add-on and trailing button", "#input-group-with-add-on-and-trailing-button" %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/corgie/forms/_radio.html.erb

@@ -0,0 +1,92 @@
+<div id="form-radio">
+<%= render layout: example, locals: { heading: "Base" } do %>
+
+<%= render preview('neutral') do %>
+<div class="form-group mb-0 font-tiktok">
+  <div class="mb-2 flex items-center">
+    <input class="form-input-radio" type="radio" name="radio_default" id="radio_default_1">
+    <label class="ml-2" for="radio_default_1">
+      Default radio
+    </label>
+  </div>
+  <div class="flex items-center">
+    <input class="form-input-radio" type="radio" name="radio_default" id="radio_default_2" checked>
+    <label class="ml-2" for="radio_default_2">
+      Default checked radio
+    </label>
+  </div>
+</div>
+<% end %>
+
+
+<% content_for :example, flush: true do %>
+<%# .html %>
+<% content_for :html, flush: true do %>
+<div class="form-group">
+  <div class="mb-2 flex items-center">
+    <input class="form-input-radio" type="radio" name="radio_default" id="radio_default_1">
+    <label class="ml-2" for="radio_default_1">
+      Default radio
+    </label>
+  </div>
+  <div class="flex items-center">
+    <input class="form-input-radio" type="radio" name="radio_default" id="radio_default_2" checked>
+    <label class="ml-2" for="radio_default_2">
+      Default checked radio
+    </label>
+  </div>
+</div>
+<% end %>
+
+<%# .erb %>
+<% content_for :erb, flush: true do %>
+<!-- ActionView::Helpers::FormTagHelper -->
+<div class="form-group">
+  <div class="mb-2 flex items-center">
+    <%%= radio_button_tag "radio_default", "1", false, class: "form-input-radio" %>
+    <%%= label_tag "radio_default_1", "Default radio", class: "ml-2" %>
+  </div>
+
+  <div class="flex items-center">
+    <%%= radio_button_tag "radio_default", "2", true, class: "form-input-radio" %>
+    <%%= label_tag "radio_default_2", "Default checked radio", class: "ml-2" %>
+  </div>
+</div>
+
+<!-- ActionView::Helpers::FormHelper -->
+<%%= form_with model: @form do |f| %>
+  <div class="form-group">
+    <div class="mb-2 flex items-center">
+      <%%= f.radio_button :radio_default, "1", class: "form-input-radio" %>
+      <%%= f.label :radio_default_1, "Default radio", class: "ml-2" %>
+    </div>
+
+    <div class="flex items-center">
+      <%%= f.radio_button :radio_default, "2", class: "form-input-radio" %>
+      <%%= f.label :radio_default_2, "Default checked radio", class: "ml-2" %>
+    </div>
+  </div>
+
+  <%%= f.submit class: "btn btn-primary" %>
+<%% end %>
+
+<!-- Railsui::FormBuilder -->
+<%%= form_with model: @form, builder: Railsui::FormBuilder do |f| %>
+  <%%= f.radio_button :radio_default, "1", label: "Default radio" %>
+  <%%= f.radio_button :radio_default, "2", label: "Default checked radio" %>
+  <%%= f.submit %>
+<%% end %>
+<% end %>
+
+<%= render_snippet active_tab: :erb %>
+<% end %>
+<% end %>
+</div>
+
+<%= system_pagination(prev_path: systems_forms_checkbox_path, prev_text: "Checkbox", next_path: systems_forms_switch_path, next_text: "Switch") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Base", "#radio-base" %>
+  <% end %>
+<% end %>