<Checkbox />

This component is returned by Settings.useForm().

Example

src/app/settings/page.tsx

import React from "react"
import {Settings} from "attio/client"

import schema from "./schema"

export default Settings.defineWorkspacePage(schema, () => {
  const {Form, Checkbox} = Settings.useForm(schema)

  return (
    <Form>
      <Checkbox label="Enable automatic sync" name="auto_sync_enabled" />
    </Form>
  )
})

Grouping multiple checkboxes

To group multiple related checkboxes together under a legend, wrap them in a <Fieldset />:

<Fieldset legend="Notification channels">
  <Checkbox label="Email notifications" name="email_notifications" />
  <Checkbox label="SMS notifications" name="sms_notifications" />
  <Checkbox label="Push notifications" name="push_notifications" />
</Fieldset>

Props

string

required

The label of the input field.

string

required

The key of the boolean value of the input field in your settings schema.e.g. "auto_sync_enabled"

boolean

Whether or not the field should be disabled.Defaults to false (not disabled).

⌘I

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