Toggle

Toggle - Phlex implementation

Examples

Default

A two-state button that can be either on or off.

<%= render "ui/toggle", variant: "outline" do %>B<% end %>

<%= render UI::Toggle.new(variant: "outline") { "B" } %>

<%= render(UI::ToggleComponent.new(variant: "outline")) { "B" } %>

Outline

Toggle with outline variant.

<%= render "ui/toggle", variant: "outline" do %>I<% end %>

<%= render UI::Toggle.new(variant: "outline") { "I" } %>

<%= render(UI::ToggleComponent.new(variant: "outline")) { "I" } %>

With Text

Toggle with text content.

<%= render "ui/toggle", variant: "outline" do %>
  Italic
<% end %>

<%= render UI::Toggle.new(variant: "outline") { "Italic" } %>

<%= render(UI::ToggleComponent.new(variant: "outline")) { "Italic" } %>

Disabled

A disabled toggle.

<%= render "ui/toggle", variant: "outline", disabled: true do %>I<% end %>

<%= render UI::Toggle.new(variant: "outline", disabled: true) { "I" } %>

<%= render(UI::ToggleComponent.new(variant: "outline", disabled: true)) { "I" } %>

Small

A small toggle.

<%= render "ui/toggle", variant: "outline", size: "sm" do %>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16"/><path d="M4 12h16"/><path d="M4 18h16"/></svg>
<% end %>

<%= render UI::Toggle.new(variant: "outline", size: "sm") do %>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16"/><path d="M4 12h16"/><path d="M4 18h16"/></svg>
<% end %>

<%= render(UI::ToggleComponent.new(variant: "outline", size: "sm")) do %>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16"/><path d="M4 12h16"/><path d="M4 18h16"/></svg>
<% end %>

Large

A large toggle.

<%= render "ui/toggle", variant: "outline", size: "lg" do %>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16"/><path d="M4 12h16"/><path d="M4 18h16"/></svg>
<% end %>

<%= render UI::Toggle.new(variant: "outline", size: "lg") do %>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16"/><path d="M4 12h16"/><path d="M4 18h16"/></svg>
<% end %>

<%= render(UI::ToggleComponent.new(variant: "outline", size: "lg")) do %>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16"/><path d="M4 12h16"/><path d="M4 18h16"/></svg>
<% end %>

Features

Custom styling with Tailwind classes
Disabled state support
ARIA attributes for accessibility

API Reference

Toggle

A two-state button that can be either on or off.

Parameters

Name	Type	Default	Description
variant	String	default	Visual style variant
size	String	default	Size of the element
type	String	button	The type
pressed	Boolean	false	The pressed
disabled	Boolean	false	Whether the element is disabled

Group

A container for a set of toggle items that can be toggled on or off.

Parameters

Name	Type	Default	Description
type	String	single	The type
variant	String	default	Visual style variant
size	String	default	Size of the element
value	String	nil	The current value
spacing	Integer	0	The spacing
orientation	String	nil	Orientation (horizontal or vertical)

Accessibility

Adheres to theButton WAI-ARIA design pattern

Implements the WAI-ARIA Button pattern with proper roles, states, and keyboard navigation.

ARIA Attributes

aria-pressed

JavaScript

Stimulus Controller

ui--toggle

Values

Name	Type	Description
pressed	Boolean	The pressed

Actions

toggle