<TextInput />

This component is returned by Settings.useForm().

Unlike with useForm() where validation is defined in the schema, workspace settings validation is specified directly on the input components using props like minLength, maxLength, multiline, and url.

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, TextInput} = Settings.useForm(schema)

  return (
    <Form>
      <TextInput label="Display name" name="display_name" minLength={3} maxLength={50} />
      <TextInput label="Webhook URL" name="webhook_url" type="url" url />
      <TextInput label="Description" name="description" multiline maxLength={500} />
    </Form>
  )
})

Props

string

required

The label of the input field.

string

required

The key of the string value of the input field in your settings schema.e.g. "display_name"

'text' | 'email' | 'password' | 'tel' | 'url'

The type of the input field.They roughly correspond to the HTML types text, email, password, tel, and url.Defaults to "text".

Useful on mobile devices with virtual keyboards.

string

An optional placeholder text for your input.

number

The minimum length (number of characters) required. Validation will fail if the user inputs a string shorter than this value.

number

The maximum length (number of characters) allowed. Validation will fail if the user inputs a string longer than this value.

boolean

If true, the input will be rendered as a multiline textarea instead of a single-line input.Defaults to false.

boolean | { protocol?: RegExp; message?: string }

If true, validates that the string is a valid URL with an allowed protocol (default http/https) and a valid top-level domain.You can pass an object with protocol to override the allowed protocol pattern, and message to customize the validation error message.Defaults to false.

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

Props

​Example

​Props

Example

Props