Checkbox

Checkboxes are an input type that allows you to make a selection from a set of choices on a form.

This component is used along the form provider. It is recommended to check it out for more information about its use.

Basic Implementation

To start using the checkbox component, you need to put it inside a form provider.

basic-component.tsx
    
       
 import { useState } from "react"; 
 import { Form, Checkbox, Button, type FormValues } from "cloth-ui"; 
 
 export const BasicComponent = () => { 

  const [checked, setChecked] = useState<boolean | null>(null); 
 

  const handleSubmit = (data: FormValues) => { 

    setUsername(Boolean(data["tos"])): 

  }; 
 

  return ( 

    <Form 

      id="myForm" 

      submit={handleSubmit} 

    > 

      <Checkbox id="tos" label="Accept Terms of Service" /> 

      <Button variant="secondary" text="Submit" buttonType="submit" /> 

      {checked === true && ( 

        <span> 

          You have accepted the Terms of Service 

        </span> 

      {checked === false && ( 

        <span> 

          You did not accept the Terms of Service 

        </span> 

      )} 

    </Form> 

  ); 
 };

Disabled Checkboxes

Checkboxes can be disabled when needed, and they cannot be checked or unchecked during that state.

disabled-component.tsx
    
       
 import { useState } from "react"; 
 import { Form, Checkbox, Button, type FormValues } from "cloth-ui"; 
 
 export const DisabledComponent = () => { 

  const [checked, setChecked] = useState(false); 
 

  const handleSubmit = (data: FormValues) => { 

    setUsername(Boolean(data["updates"])): 

  }; 
 

  return ( 

    <Form 

      id="myForm" 

      submit={handleSubmit} 

    > 

      <Checkbox id="updates" label="Receive updates of our products" disabled /> 

      <Button variant="secondary" text="Submit" buttonType="submit" /> 

    </Form> 

  ); 
 };