Field

Combine an input, label, icon, and validation feedback into a consistent form field.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Field to combine a label, input, help, and error. When Input, Select, or Textarea is placed inside Field, Field owns the related surfaces. Use as="segment" for adjoining field segments; avoid duplicate borders and error regions.

label and error provide default copy; invalid and readonly express field state.
Use children to compose Input, Select, Textarea, and attachments. parts configures generated label and error content; set Props directly on explicit child components.

Import

import { Field } from '@snowui-design-system/components';

Usage

Card

Notifications

Permissions

Date

Company

Country

Status

Name

Budget

Phone

Email validation

Country validation

Message

Website

Model

API Reference

Property	Type	Default	Example	Description
`invalid`	`boolean`	`false`	`invalid`	Invalid state for the whole field, forcing an error border.
`readonly`	`boolean`	`false`	`readonly`	Read-only state for the whole field.
`label`	`string \| Snippet`	`—`	`label={labelContent}`	Generate an internal <Text as="label">. No label is generated by default.
`error`	`string \| Snippet`	`—`	`error={errorContent}`	Generate an internal <Text as="error"> when invalid=true. No error is generated by default.
`parts`	`ComponentPartsOf<{ Text: typeof Text }>`	`—`	`parts={partsOptions}`	Configure the generated label and error Text components.
`children`	`Snippet`	`—`	`<Field>Content</Field>`	Field content composed freely from inputs and related elements.