- 1.5.0

Switch

Renders a switch as a button.

Read more Read less

If you want to render a switch as part of a form, use the input/1 component with the type "switch" instead.

Note that this component only renders a button with a label, a state, and <span> with the class switch-control. You will need to style the switch control span with CSS in order to give it the appearance of a switch.

Maturity: Developing

Usage

<.switch
  label="Subscribe"
  checked={true}
  phx-click="toggle-subscription"
/>
Attribute Type Documentation Default Value
checked :boolean false
class :any

Any additional classes to be added.

 Read more Read less
[]

Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component.

The value can be a string or a list of strings.
Required label * :string
off_text :string

The state text when the switch is off. This value should be translated

 Read more Read less
"Off"

to the language in which the rest of the page is displayed.
on_text :string

The state text when the switch is on. This value should be translated to

 Read more Read less
"On"

the language in which the rest of the page is displayed.
rest :global

Any additional HTML attributes.