@bento/field-error

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>;
}