Switch

NB! The component will be deprecated soon.

Please check out our new Switch component.

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