HEEx
<ConnieUI.Buttons.toggle checked>Connie AI</ConnieUI.Buttons.toggle>
Variant matrix
Every combination of one or two attributes, side by side.
Controls
Set by the example
click
Docs
A standalone switch (`role="switch"`) not tied to a form field. The inner block
is its label, and becomes its accessible name.
A description shown next to the switch belongs outside it, so it is not read
as part of the name. Give that element an id and pass it as `describedby`, and
the switch announces it as its description:
<ConnieUI.Buttons.toggle checked={@enabled} click={JS.push("toggle")} describedby="ai-hint">
Connie AI
</ConnieUI.Buttons.toggle>
<ConnieUI.Typography.muted id="ai-hint">
Turning on Connie AI requires signing our AI Processing Addendum.
</ConnieUI.Typography.muted>
| Attribute | Type | Default | Description |
|---|---|---|---|
| No data found. | |||
| checked * | :boolean |
|
|
| size | :string | "sm" |
xs | sm | md
|
| click | {:struct, Phoenix.LiveView.JS} | nil |
|
| disabled | :boolean | false |
|
| rest | :global |
|
|
| describedby | :string | nil |
id of the element describing the switch, set as its `aria-describedby`
|
| Slot | Slot attributes | Description |
|---|---|---|
| No data found. | ||
| inner_block | ||