import { Meta, ArgTypes, Story, Controls, Source, } from '@storybook/addon-docs/blocks';

FieldError

The @bento/field-error package provides the FieldError component, which is used to display error messages in form primitives, such as RadioGroup or CheckboxGroup. It is meant to be used in conjunction with form controls such as the RadioGroup or CheckboxGroup primitives.

Installation

npm install --save @bento/field-error

Props

The following properties are available to be used on the FieldError component:

| Prop | Type | Required | Description | |------|------|----------|------------| | align | "start" \| "center" \| "end" \| "justify" | No | The alignment of the text. | | as | string | No | The HTML element to render the text as. | | children | ReactNode | No | The content to display inside the text. | | maxLines | number | No | The maximum number of lines to display. | | wrap | "wrap" \| "nowrap" \| "balance" \| "pretty" \| "stable" | No | The wrapping behavior of the text. | | slot | string | No | A named part of a component that can be customized. This is implemented by the consuming component. The exposed slot names of a component are available in the components documentation. | | slots | Record<string, object \| Function> | No | An object that contains the customizations for the slots. The main way you interact with the slot system as a consumer. |

Examples

Default

A simple usage of the FieldError component. The error message is only displayed when isInvalid is true.

import { FieldError, type FieldErrorProps } from '@bento/field-error';
/* v8 ignore next */
import React from 'react';

export function DefaultExample(args: FieldErrorProps) {
  return <FieldError {...args}>This field is required</FieldError>;
}