Field

API reference and demos for Field.

Source

Import

import { Field } from "@flanksource/clicky-ui/components";

Demos

With Helper · Open in Storybook

Required · Open in Storybook

With Error · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
className	string	—	—
error	ReactNode	—	Inline validation message rendered under the control in destructive color. When set it takes the place of `helper`.
helper	ReactNode	—	Muted helper/description text under the control (shown when there's no error).
htmlFor	string	—	Associates the label with a control by id (optional for non-input controls).
label*	ReactNode	—	Field label text (or node).
labelClassName	string	—	Overrides the label classes (e.g. an uppercase form style).
onBlur	FocusEventHandler<HTMLDivElement>	—	Fires when focus leaves the field (focusout bubbles), so a form can mark the field touched and reveal its error on blur.
required	boolean	—	Appends a destructive "*" after the label.