@stratakit/bricks/dist/Field.d.ts

Small, modular components for StrataKit

import * as React from "react";
import type { CollectionItemProps } from "@ariakit/react/collection";
import type { BaseProps } from "@stratakit/foundations/secret-internals";
interface FieldRootProps extends BaseProps {
    /**
     * Allows overriding the default block layout for text controls.
     */
    layout?: "inline";
}
/**
 * A container for form controls. It manages ID associations, and provides a
 * consistent layout and spacing.
 *
 * Example:
 * ```tsx
 * <Field.Root>
 *   <Field.Label>Label</Field.Label>
 *   <Field.Control render={<TextBox.Input />} />
 * </Field.Root>
 * ```
 *
 * Supports a `layout` prop, which can be set to `inline` to align the label and
 * control horizontally.
 *
 * Should contain a `Field.Label` component paired with a form control.
 *
 * Supported form controls include:
 * - `TextBox.Input`
 * - `TextBox.Textarea`
 * - `Checkbox`
 * - `Radio`
 * - `Switch`
 */
declare const FieldRoot: React.ForwardRefExoticComponent<FieldRootProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
/**
 * A label for the field’s control element. This is automatically associated
 * with the control’s `id`.
 */
declare const FieldLabel: React.ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLLabelElement>>;
/**
 * A description for the field’s control element. This is automatically
 * associated with the control.
 *
 * Should not include content without an adequate text alternative (e.g.
 * interactive elements).
 */
declare const FieldDescription: React.ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLDivElement>>;
interface FieldCollectionItemControlProps extends Pick<CollectionItemProps, "render" | "id"> {
    render: React.JSX.Element | ((props: Omit<React.HTMLAttributes<any> & {
        ref?: React.Ref<any>;
    }, "children">) => React.ReactNode);
}
/**
 * The control component for the field.
 *
 * Use the `render` prop to render the control component.
 *
 * ```tsx
 * <Field.Control render={<TextBox.Input />} />
 * ```
 *
 * If the rendered component uses a compositional API, then use a function
 * within `render` to apply the `controlProps` to the correct sub-component:
 *
 * ```tsx
 * <Field.Control
 *   render={(controlProps) => (
 *     <TextBox.Root>
 *       <TextBox.Icon href={placeholder} />
 *       <TextBox.Input {...controlProps} />
 *     </TextBox.Root>
 *   )}
 * />
 * ```
 *
 * If you need a custom `id` set for the control, set it on this component
 * instead of the control component within `render`.
 *
 * ```tsx
 * <Field.Control id="custom" render={<TextBox.Input />} />
 * ```
 */
declare const FieldControl: React.ForwardRefExoticComponent<FieldCollectionItemControlProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
/**
 * An associated error message for a field. When used within `<Field.Root>`, the
 * associated form control will be rendered with `aria-invalid="true"`.
 *
 * Example:
 * ```tsx
 * <Field.Root>
 *   <Field.Label>Label</Field.Label>
 *   <Field.Control render={<TextBox.Input />} />
 *   <Field.ErrorMessage>Something is wrong!</Field.ErrorMessage>
 * </Field.Root>
 * ```
 */
declare const FieldErrorMessage: React.ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLDivElement>>;
export { FieldRoot as Root, FieldControl as Control, FieldLabel as Label, FieldDescription as Description, FieldErrorMessage as ErrorMessage, };