Switch

Switch is a control that is used to quickly switch between two possible states. Switches are only used for these binary actions that occur immediately after the user “flips” the switch. They are commonly used for “on/off” switches.

Size

State
@user_changeset = #Ecto.Changeset<
  action: nil,
  changes: %{agrees_to_marketing_emails: false},
  errors: [],
  data: #MoonWeb.Pages.Tutorials.AddDataUsingForm.User<>,
  valid?: true
>

Icons

State
@user_changeset = #Ecto.Changeset<
  action: nil,
  changes: %{agrees_to_marketing_emails: false},
  errors: [],
  data: #MoonWeb.Pages.Tutorials.AddDataUsingForm.User<>,
  valid?: true
>

Captions

AM PM
OFF ON
Moon Sun
State
@user_changeset = #Ecto.Changeset<
  action: nil,
  changes: %{agrees_to_marketing_emails: false},
  errors: [],
  data: #MoonWeb.Pages.Tutorials.AddDataUsingForm.User<>,
  valid?: true
>

Form example

Agrees to Terms of Service
State
@user_changeset = #Ecto.Changeset<
  action: nil,
  changes: %{agrees_to_marketing_emails: false},
  errors: [],
  data: #MoonWeb.Pages.Tutorials.AddDataUsingForm.User<>,
  valid?: true
>
Switch props
Name Type Required Default Description
checked boolean No false Is switch checked/unchecked
caption_unchecked string Yes - Displayed text when unchecked
caption_checked string Yes - Displayed text when checked
field atom No false If not used in Field component, needs to be specified