field

Installation

Import Field and subcomponents from `@/components/kamod-ui/field` (FieldSet, FieldGroup, FieldLabel, FieldDescription, FieldError, …).

pnpm add @kamod-ch/ui

Usage

Compose Field around controls. Use FieldSet + FieldLegend for semantics. Field orientation horizontal for checkbox/radio + label rows. FieldLabel can wrap a Field for choice cards. Field still accepts label, description, and error props for quick stacks (legacy).

import { Field } from "@/components/kamod-ui/field";

<Field />

Anatomy

FieldSet, FieldGroup, label, control, description, error (shadcn Usage).

Legacy props

Field with label, description, and error props (backward compatible).

Project name

Shown in the dashboard header

Input

Username and password fields (shadcn Field Input).

Textarea

shadcn Field Textarea.

Select

shadcn Field Select.

Slider

FieldTitle + FieldDescription + Slider (shadcn Field Slider, single value).

Fieldset

Legend, description, grid of inputs (shadcn Fieldset).

Address Information

We need your address to deliver your order.

Checkbox

Horizontal Field rows + FieldContent (shadcn Field Checkbox).

Desktop items

Select items to show on the desktop.

Hard disks

External disks

Sync folders

Your Desktop & Documents are synced with cloud storage.

Radio

RadioGroup inside FieldSet (shadcn Field Radio).

Subscription Plan

Yearly and lifetime plans offer savings.

Monthly ($9.99/month)

Yearly ($99.99/year)

Switch

Label + Switch horizontal (shadcn Field Switch).

Multi-factor authentication

Choice card

FieldLabel wraps Field + Radio (shadcn Choice Card).

Compute Environment

Select the compute environment for your cluster.

Kubernetes

Run GPU workloads on a K8s cluster.

Virtual Machine

Access a VM to run GPU workloads.

Field group + separator

Stacked FieldSets with FieldSeparator (shadcn Field Group).

Responses

Get notified when long requests finish.

Push notifications

Tasks

Updates for tasks you created.

Push notifications

Email notifications

FieldError (errors array)

FieldError can derive text from an errors array (forms integration).

Responsive orientation

Field orientation responsive stacks until @md inside @container FieldGroup.

Label

Resize the viewport to see layout change.

Legacy error

Validation with legacy error prop.

Email

Please provide a valid email address

API Reference

Props, slots and variants for this component.

Field component props and accepted values.

Prop	Type	Default
orientation	`"vertical" \| "horizontal" \| "responsive"`	`"vertical"`
disabled	`boolean`	`false`
invalid	`boolean`	`false`
label / description / error	`ComponentChildren`	`legacy only`
FieldLabel htmlFor	`string`	`—`
FieldError errors	`{ message?: string }[]`	`undefined`

Accessibility Notes

Use FieldLabel with htmlFor matching control id. Surface validation with aria-invalid on the control and FieldError or error prop. FieldSet and FieldLegend group related inputs for assistive tech.