Toggle

Toggle switches for binary on/off settings.

Basic Toggle

A simple toggle switch with label.

Enable notifications

<%= render Rvk::ToggleComponent.new(
  name: "notifications",
  label: "Enable notifications"
) %>

Checked State

Pre-enable a toggle.

Dark mode

<%= render Rvk::ToggleComponent.new(
  name: "dark_mode",
  label: "Dark mode",
  checked: true
) %>

Sizes

Toggles come in 3 sizes.

Small toggle

Medium toggle

Large toggle

<%= render Rvk::ToggleComponent.new(name: "toggle_sm", label: "Small", size: :sm) %>
<%= render Rvk::ToggleComponent.new(name: "toggle_md", label: "Medium", size: :md) %>
<%= render Rvk::ToggleComponent.new(name: "toggle_lg", label: "Large", size: :lg) %>

Settings List

Common pattern for settings pages.

Email notifications

Receive email updates

Push notifications

Receive push notifications

Marketing emails

Receive promotional content

<div class="flex items-center justify-between">
  <div>
    <p class="font-medium text-surface-900">Email notifications</p>
    <p class="text-sm text-surface-500">Receive email updates</p>
  </div>
  <%= render Rvk::ToggleComponent.new(name: "email_notifications", checked: true) %>
</div>

With Hint

Add helper text for context.

Auto-save

Automatically save changes every 30 seconds.

<%= render Rvk::ToggleComponent.new(
  name: "auto_save",
  label: "Auto-save",
  hint: "Automatically save changes every 30 seconds.",
  checked: true
) %>

Disabled State

Disabled toggles are non-interactive.

Disabled off

Disabled on

<%= render Rvk::ToggleComponent.new(name: "disabled1", label: "Disabled off", disabled: true) %>
<%= render Rvk::ToggleComponent.new(name: "disabled2", label: "Disabled on", disabled: true, checked: true) %>

Props

Prop	Type	Default	Description
name	String	required	Form field name
value	String	"1"	Value when toggled on
label	String	nil	Label text (displayed inline)
size	Symbol	:md	Toggle size: :sm, :md, :lg
checked	Boolean	false	Whether toggle is on
hint	String	nil	Helper text below toggle
error	String	nil	Error message
required	Boolean	false	Mark as required
disabled	Boolean	false	Disable the toggle