Use Form Field

Open-code aq-ui React hook for Use Form Field.

Installation

pnpm dlx aq-ui@alpha add use-form-field

API reference

Client module

Import the parts you need, then jump to an export for its contract.

View full source

Quick start

"use client"

import { useFormField } from "@/hooks/use-form-field"

const result = useFormField()

FormFieldControls

interfaceSource L20

Type contract for FormFieldControls.

interface FormFieldControls

Members

Name	Type
`id`	`string`
`descriptionId`	`string`
`errorId`	`string`
`invalid`	`boolean`
`errors`	`string[]`
`inputProps`	`{ id: string name?: string disabled?: boolean required?: boolean "aria-invalid"?: true "aria-describedby"?: string "aria-errormessage"?: string }`
`labelProps`	`{ htmlFor: string }`
`descriptionProps`	`{ id: string }`
`errorProps`	`{ id: string; role: "alert"; "aria-live": "polite" }`

FormFieldError

interfaceSource L5

Type contract for FormFieldError.

interface FormFieldError

Members

Name	Type
`message?`	`string`

useFormField

functionSource L42

Open-code aq-ui React hook for Use Form Field.

function useFormField({ id, name, disabled, required, invalid, errors = EMPTY_ERRORS, descriptionId, errorId, }: UseFormFieldOptions = {}): FormFieldControls

Returns: FormFieldControls

Parameters

Name	Type	Default
`options?`	`UseFormFieldOptions`	`{}`

const result = useFormField()

UseFormFieldOptions

interfaceSource L9

Type contract for UseFormFieldOptions.

interface UseFormFieldOptions

Members

Name	Type	Default
`id?`	`string`	`—`
`name?`	`string`	`—`
`disabled?`	`boolean`	`—`
`required?`	`boolean`	`—`
`invalid?`	`boolean`	`—`
`errors?`	`Array<string \| FormFieldError \| undefined \| null>`	`EMPTY_ERRORS`
`descriptionId?`	`string`	`—`
`errorId?`	`string`	`—`

Files

hooks/use-form-field.ts