Form

A scrollable group of fields and settings.

import { Form, Toggle, TextField } from '@satinhq/kit'

Example

import { useState } from 'react'
import { Form, Screen, Section, TextField, Toggle } from '@satinhq/kit'

function Example() {
  const [name, setName] = useState('Alex')
  const [notifications, setNotifications] = useState(true)

  return (
    <Screen>
      <Form id="settings">
        <Section header="Preferences">
          <TextField label="Name" value={name} onChange={setName} />
          <Toggle label="Notifications" isOn={notifications} onChange={setNotifications} />
        </Section>
      </Form>
    </Screen>
  )
}

9:41

Click Notifications to change the setting.

Bind each field

Store editable values in React state. Pass the current value and its setter to each control.

Describe a group

Use a Section header for its name and a footer for explanatory text. Form uses grouped rows without extra CSS.

API

Scroll horizontally to read every column.

Prop	Type	Description
id	string	A stable scroll region name.
children	ReactNode	Sections and controls.
searchable	Searchable	Optional search configuration.

Related: Quick start, List, Screen.

:::