Form

A wrapper for the actual form input element.

Connects the input control to the form field's validation state and ARIA attributes. Use this to wrap input, textarea, select, or custom form elements.

Installation


npm install @strongtie/design-system

import { Form } from "@strongtie/design-system/form"

Components

This module exports the following components:

FormControl
FormDescription
FormField
FormItem
FormLabel
FormMessage

Props

`<FormField>`

Prop	Type	Default
`name` *	`string`	-
`render` *	`({ field, fieldState, formState, }: { field: ControllerRenderProps<TFieldValues,...`	-
`control`	`Control<TFieldValues, any, TFieldValues>`	-
`defaultValue`	`any`	-
`disabled`	`boolean`	-
`exact`	`boolean`	-
`rules`	`Omit<RegisterOptions<TFieldValues, TName>, "disabled" \| "valueAsNumber" \| "value...`	-
`shouldUnregister`	`boolean`	-

Example

import { Form } from "@strongtie/design-system/form"
 
export default function Example() {
  return <Form>{/* Your content here */}</Form>
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

form-description
form-item
form-label
form-message

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Field Hover Card

On This Page

Installation Components Props <FormField>Example Styling Classes Accessibility

Contribute