CheckBox Component

Table of Contents

Usage

Velit mollit veniam occaecat nisi deserunt. Adipisicing officia consectetur pariatur eu do minim sint do minim. Esse officia sit sit excepteur esse. Aliqua quis excepteur exercitation amet esse proident eiusmod minim occaecat ipsum proident non. Ut mollit laborum mollit adipisicing aute Lorem. Labore mollit enim cupidatat nisi est.

Default CheckBox

<script>
  import { Form, CheckBox } from "$lib/components";
</script>

<Form on:submit>
  <CheckBox
    name="gdpr"
    label="Yes, I have taken note of the Privacy Policy and agree that the data I have provided may be collected and stored electronically. My data will only be used strictly for the purpose of processing and responding to my request."
  />
</Form>

With HTML Label (Slot)

<script>
  import { Form, CheckBox } from "$lib/components";
</script>

<Form on:submit>
  <CheckBox name="gdpr">
    Yes, I have taken note of the <a href="/docs/forms/checkbox"
      >Privacy Policy</a
    > and agree that the data I have provided may be collected and stored electronically.
    My data will only be used strictly for the purpose of processing and responding
    to my request.
  </CheckBox>
</Form>

Required State

<script>
  import { Form, CheckBox } from "$lib/components";
</script>

<Form on:submit>
  <CheckBox
    required
    name="gdpr"
    label="Yes, I have taken note of the Privacy Policy and agree that the data I have provided may be collected and stored electronically. My data will only be used strictly for the purpose of processing and responding to my request."
  />
</Form>

Disabled State

<script>
  import { Form, CheckBox } from "$lib/components";
</script>

<Form on:submit>
  <CheckBox
    disabled
    name="gdpr"
    label="Yes, I have taken note of the Privacy Policy and agree that the data I have provided may be collected and stored electronically. My data will only be used strictly for the purpose of processing and responding to my request."
  />
</Form>

Warning State

You might want to tick this!
<script>
  import { Form, CheckBox } from "$lib/components";
</script>

<Form on:submit>
  <CheckBox
    warning
    warningText="You might want to tick this!"
    name="gdpr"
    label="Yes, I have taken note of the Privacy Policy and agree that the data I have provided may be collected and stored electronically. My data will only be used strictly for the purpose of processing and responding to my request."
  />
</Form>

Invalid State

You have to tick this!
<script>
  import { Form, CheckBox } from "$lib/components";
</script>

<Form on:submit>
  <CheckBox
    invalid
    invalidText="You have to tick this!"
    name="gdpr"
    label="Yes, I have taken note of the Privacy Policy and agree that the data I have provided may be collected and stored electronically. My data will only be used strictly for the purpose of processing and responding to my request."
  />
</Form>