@yamada-ui/react/dist/types/components/field/field.d.ts

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { ThemeProps } from "../../core/system/index.types.js";
import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
import "../../core/index.js";
import { FieldStyle } from "./field.style.js";
import "../../index.js";
import * as react883 from "react";
import { ReactNode } from "react";

//#region src/components/field/field.d.ts
interface FieldContext extends FieldProps, Pick<FieldRootProps, "replace"> {
  id: string;
  errorMessageId: string;
  focused: boolean;
  helperMessageId: string;
  labelId: string;
  onBlur: () => void;
  onFocus: () => void;
}
declare const FieldContext: react883.Context<FieldContext | undefined>, useFieldContext: () => FieldContext | undefined;
interface FieldProps {
  /**
   * If `true`, the field will be disabled.
   *
   * @default false
   */
  disabled?: boolean;
  /**
   * If `true`, the field will be invalid.
   *
   * @default false
   */
  invalid?: boolean;
  /**
   * If `true`, the field will be readonly.
   *
   * @default false
   */
  readOnly?: boolean;
  /**
   * If `true`, the field will be required.
   *
   * @default false
   */
  required?: boolean;
}
interface FieldRootProps extends HTMLStyledProps, ThemeProps<FieldStyle>, Pick<FieldLabelProps, "optionalIndicator" | "requiredIndicator">, FieldProps {
  /**
   * The field error message to use.
   */
  errorMessage?: ReactNode;
  /**
   * The field helper message to use.
   */
  helperMessage?: ReactNode;
  /**
   * The field label to use.
   */
  label?: ReactNode;
  /**
   * If `true`, switch between helper message and error message using invalid.
   *
   * @default true
   */
  replace?: boolean;
  /**
   * Props the error message component.
   */
  errorMessageProps?: FieldErrorMessageProps;
  /**
   * Props the helper message component.
   */
  helperMessageProps?: FieldHelperMessageProps;
  /**
   * Props the label component.
   */
  labelProps?: FieldLabelProps;
}
declare const FieldPropsContext: react883.Context<Partial<FieldRootProps> | undefined>, useFieldPropsContext: () => Partial<FieldRootProps> | undefined;
/**
 * `Field` is a component used to group form elements with label, helper message, error message, etc.
 *
 * @see https://yamada-ui.com/docs/components/field
 */
declare const FieldRoot: Component<"div", FieldRootProps>;
interface FieldLabelProps extends HTMLStyledProps<"label"> {
  /**
   * The optional indicator to use.
   */
  optionalIndicator?: ReactNode;
  /**
   * If `true`, the field will be required.
   *
   * @default false
   */
  required?: boolean;
  /**
   * The required indicator to use.
   */
  requiredIndicator?: ReactNode;
}
declare const FieldLabel: Component<"label", FieldLabelProps>;
interface FieldHelperMessageProps extends HTMLStyledProps<"span"> {}
declare const FieldHelperMessage: Component<"span", FieldHelperMessageProps>;
interface FieldErrorMessageProps extends HTMLStyledProps<"span"> {}
declare const FieldErrorMessage: Component<"span", FieldErrorMessageProps>;
//#endregion
export { FieldContext, FieldErrorMessage, FieldErrorMessageProps, FieldHelperMessage, FieldHelperMessageProps, FieldLabel, FieldLabelProps, FieldProps, FieldPropsContext, FieldRoot, FieldRootProps, useFieldPropsContext };
//# sourceMappingURL=field.d.ts.map