<Checkbox />

Example

approval-dialog.tsx

import React from "react"
import {Forms, useForm, showToast} from "attio/client"

export function ApprovalDialog() {
  const {Form, SubmitButton, Checkbox} = useForm(
    {
      approved: Forms.boolean(),
    },
    {
      approved: false,
    },
  )
  return (
    <Form
      onSubmit={async (values) => {
        await showToast({
          title: "Form submitted",
          variant: "success",
          text: values.approved ? "Approved" : "Not approved",
        })
      }}
    >
      {/* Some information here */}
      <Checkbox label="Approved" name="approved" />
      <SubmitButton label="Submit" />
    </Form>
  )
}

Grouping multiple checkboxes

To group multiple related checkboxes together, wrap them in a <Fieldset />. When wrapped in a fieldset, the checkbox labels will be rendered on the right side of the checkbox instead of above it:

<Fieldset legend="Notification preferences">
  <Checkbox label="Email" name="emailNotifications" />
  <Checkbox label="SMS" name="smsNotifications" />
  <Checkbox label="Push notifications" name="pushNotifications" />
</Fieldset>

When checkboxes are wrapped in a <Fieldset />, their labels are rendered on the right side of the checkbox instead of above it.

Introduction

Guides

Extensions

Workflow blocks

Notifications

Dialogs

Components

Forms

Icons

Settings

GraphQL

Data fetching

Server

System

Legacy

Example

Grouping multiple checkboxes

Props

​Example

​Grouping multiple checkboxes

​Props

Example

Grouping multiple checkboxes

Props