On this page

FormControl

FormControl, FormLabel, and FormMessage components for building accessible forms with validation states.

import { FormLabel, FormMessage } from "@ninna-ui/forms";

pnpm add @ninna-ui/forms@latest

Includes @ninna-ui/core. CSS setup required.View source

Usage

FormControl provides context for form fields, managing required, invalid, and disabled states.

import { FormControl, FormLabel, FormMessage, Input } from "@ninna-ui/forms";

<FormControl isRequired>
  <FormLabel>Email</FormLabel>
  <Input type="email" placeholder="you@example.com" />
  <FormMessage type="hint">We'll never share your email.</FormMessage>
</FormControl>

<FormControl isInvalid>
  <FormLabel>Password</FormLabel>
  <Input type="password" />
  <FormMessage>Password must be at least 8 characters.</FormMessage>
</FormControl>

Basic

FormControl with FormLabel and FormMessage for validation feedback.

Live preview/ Default

We'll never share your email.

Username

Password

Password must be at least 8 characters.

With Different Sizes

FormControl works with inputs of any size.

Live preview/ Default

Small

Small size input

Medium

Medium size input

Large

Large size input

API Reference

Complete list of props for FormControl, FormLabel, and FormMessage.

FormControl Props

Props

Prop	Type	Default	Description
`id`	`string`	`—`	Unique ID for the form field (auto-generated if not provided)
`isRequired`	`boolean`	`false`	Whether the field is required
`isInvalid`	`boolean`	`false`	Whether the field is in an invalid state
`isDisabled`	`boolean`	`false`	Whether the field is disabled
`isReadOnly`	`boolean`	`false`	Whether the field is read-only

FormLabel Props

Props

Prop	Type	Default	Description
`children`	`ReactNode`	`—`	Label text content
`className`	`string`	`—`	Additional CSS classes

FormMessage Props

Props

Prop	Type	Default	Description
`type`	`'error' \| 'success' \| 'warning' \| 'hint'`	`'error'`	Message type determines styling
`children`	`ReactNode`	`—`	Message content

Accessibility

FormLabel is automatically associated with the input via htmlFor
aria-required is set when isRequired is true
aria-invalid is set when isInvalid is true
aria-disabled is set when isDisabled is true
FormMessage is linked via aria-describedby