Checkbox

Checkboxes are used as a list in our forms and signup pages so users can select options of their choice. Users are free to choose how many options to select, from zero to all of them.

As each checkbox is independent, this means that additional checkboxes do not affect any other selections… or planets.

Checkbox

<Form for={@user_changeset} change="register_form_update" submit="register_form_submit">
  <TopToDown>
    <Field name={:agrees_to_terms_of_service}>
      <Checkbox id="agrees_to_terms_of_service">
        I agree to terms and services.
      </Checkbox>
      <ErrorTag />
    </Field>
    <Field name={:agrees_to_marketing_emails}>
      <Checkbox
        id="agrees_to_marketing_emails"
        disabled={!get_agrees_to_terms_of_service(@user_changeset)}
     >
        I agree to receive bonus & marketing emails.
      </Checkbox>
      <ErrorTag />
    </Field>
    <div>
      <Button type="submit" right_icon="arrows_right" variant="primary">Register</Button>
    </div>
  </TopToDown>
</Form>

State

@user_changeset = #Ecto.Changeset<
  action: nil,
  changes: %{agrees_to_terms_of_service: false},
  errors: [
    agrees_to_terms_of_service: {"please accept terms of service",
     [validation: :inclusion, enum: [true]]}
  ],
  data: #MoonWeb.Pages.Tutorials.AddDataUsingForm.User<>,
  valid?: false
>

No Label

<Form for={@user_changeset2} change="register_form_update2">
  <TopToDown>
    <Field name={:agrees_to_terms_of_service}>
      <Checkbox id="agrees_to_terms_of_service"/>
      <ErrorTag />
    </Field>
  </TopToDown>
</Form>

Disabled

<Form for={@user_changeset}>
  <TopToDown>
    <Field name={:agrees_to_terms_of_service}>
      <Checkbox id="agrees_to_terms_of_service" disabled={true}>I agree to terms and services.</Checkbox>
      <ErrorTag />
    </Field>
  </TopToDown>
</Form>

ReadOnly

<Form for={@user_changeset}>
  <TopToDown>
    <Field name={:agrees_to_terms_of_service}>
      <Checkbox id="agrees_to_terms_of_service" disabled={true}>I agree to terms and services.</Checkbox>
      <ErrorTag />
    </Field>
  </TopToDown>
</Form>

Checkbox props

Name	Type	Required	Default	Description
checked	boolean	No	false	Preset value for checkbox state
disabled	boolean	No	false	Checkbox disabled state
readonly	boolean	No	false	Checkbox isn't disabled but its value can't be changed
field	atom	Yes	-	Field name for the inner input form control
#slot	element	Yes	-	Label for the control

Components v2

Button

Form

Components v1

Charts

Datepicker

Dialog

Progress

Select

Checkbox

Checkbox

No Label

Disabled

ReadOnly