Checkbox

Data input that can be used in a group or individually

When to use

  • Used for selecting a selection from an array of options
  • Using just one checkbox is similar to using the Toggle component although the checkbox uses an Input tag that needs to be submitted

Installing

Import the component

@import { Checkbox } from '@supabase/ui'

Basic

You can use a single checkbox alone, with just a label. You can then use the prop onChange for change events.

1import { Checkbox } from "@supabase/ui";
2
3function handleOnChange(e) {
4  // use e.target.checked
5}
6
7export default function CheckboxBasic() {
8  return <Checkbox label="Basic checkbox" onChange={handleOnChange} />;
9}
10

Controlled checkbox

1import { Checkbox } from "@supabase/ui";
2import { useState } from "react";
3
4export default function CheckboxControlled() {
5  const [checked, setChecked] = useState(true);
6
7  function handleOnChange() {
8    setChecked(!checked);
9    console.log("checking");
10  }
11
12  return (
13    <Checkbox
14      label="Controlled checkbox"
15      description="The value of this checkbox is controlled by a react state"
16      checked={checked}
17      onChange={handleOnChange}
18    />
19  );
20}
21

Grouped checkboxes

Checkboxes allow for multiple selections so they are someties used in part of a group. You can wrap Checkboxes in a subcomponent called <Checkbox.Group>.

You can use the onChange prop on either the group subcomponent or the Checkbox components individually.

Optional label

You can also show label hint text here

1import { Checkbox } from "@supabase/ui";
2
3export default function CheckboxGrouped() {
4  return (
5    <div>
6      <Checkbox.Group
7        layout="horizontal"
8        label="Group of checkboxes"
9        labelOptional="Optional label"
10        descriptionText="You can also show label hint text here"
11      >
12        <Checkbox
13          label="Frist checkbox"
14          description="The value of this checkbox is controlled by a react state"
15        />
16        <Checkbox
17          label="Second checkbox"
18          description="The value of this checkbox is controlled by a react state"
19        />
20      </Checkbox.Group>
21    </div>
22  );
23}
24

API reference

SyntaxDescription
HeaderTitle
ParagraphText