Switch

Switch

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
>
Props
Name Type Required Default Description
checked boolean false false Is switch checked/unchecked
caption_unchecked string true - Displayed text when unchecked
caption_checked string true - Displayed text when checked
field atom false false If not used in Field component, needs to be specified