Text3 checks

FormText

Single-line text.

Example

Installation

bunx --bun shadcn@latest add @fieldkit/form-text

Needs the @fieldkit registry. Add it once

Usage

Add the field to your schema

schema.ts

import { z } from "zod"import { textField } from "@/lib/field-schemas"
export const schema = z.object({  company: textField({ max: 80 }),})

Render it inside a Form

The name prop matches the schema key.

example-form.tsx

import { Form } from "@/components/form/form"import { FormText } from "@/components/form/form-text"import { FormSubmit } from "@/components/form/form-submit"import { FieldGroup } from "@/components/ui/field"import { schema } from "./schema"
export function ExampleForm() {  return (    <Form      schema={schema}      defaultValues={{ company: "" }}      onSubmit={save}    >      <FieldGroup>        <FormText name="company" />        <FormSubmit>Save</FormSubmit>      </FieldGroup>    </Form>  )}

Checks

CheckOptionError message

Trims spacesdefaultNone

Lengthmin, maxEnter at least 2 characters

Patternpattern, patternMessageUse the expected format

Best practices

Set autoComplete so browsers can fill it
Never block paste

Try these values

Terminal

textField({ min: 2, max: 20 })

Input	Result	Output
`" Kijani "`	Valid	`"Kijani"`
`"K"`	Invalid	Enter at least 2 characters
`""`	Invalid	Enter at least 2 characters
`"A name that is far too long"`	Invalid	Use at most 20 characters

API reference

FormText

PropDescription

...input propsReact.ComponentProps<"input">Any input prop except value and handlers.

Field frame

PropDescription

namestringKey in the schema. Also picks the preset label and autocomplete.

labelReact.ReactNodeOverrides the preset label. Pass null to hide it.

descriptionReact.ReactNodeHint under the control.

requiredbooleanOverrides the asterisk read from the schema.

fieldPropsFormFieldPropsProps for the wrapping Field, such as className.

Add the field to your schema

Render it inside a Form

FormText

Field frame

Search docs