Form Field

1.7.0

The FormField component allows the user to enter or edit information in text format. Additionally, it provides a label, and a conditional help text that can be used to provide additional context on a validation scenario.

import React from "react";
import { FormField } from "@nimbus-ds/patterns";
import { ExclamationCircleIcon } from "@nimbus-ds/icons";

const Example: React.FC = () => (
  <FormField.Input
    label="Label text"
    helpText="Help text"
    showHelpText={true}
    id="input-id"
    helpIcon={ExclamationCircleIcon}
    placeholder="Placeholder"
  />
);

export default Example;

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/formfield

Props

Additional props are passed to the <FormField> element. See div docs for a list of props accepted by the <FormField> element.

FormField

Name	Type	Default	Description
label	React.ReactNode		Optional label for the field component.
helpText	string		Help text displaying optional hints or validation messages under the field.
helpIcon	React.FC<IconProps>		Icon supporting the help text message.
appearance	'danger' 'none' 'success' 'warning'	'none'	Appearance of the field and help text elements.
showHelpText	boolean		Control to conditionally show the help text and icon.
children*	React.ReactNode		Content of the field.

FormField.Select

Name	Type	Default	Description
appearance	'danger' 'none' 'success' 'warning'	'none'	Appearance of the field and help text elements.
label	React.ReactNode		Optional label for the field component.
helpText	string		Help text displaying optional hints or validation messages under the field.
helpIcon	React.FC<IconProps>		Icon supporting the help text message.
showHelpText	boolean		Control to conditionally show the help text and icon.
id*	string		The id of the wrapper element or the select element when native.
name*	string		The name of the wrapper element or the select element when native.
children*	React.ReactNode		The content of the select.

FormField.Textarea

Name	Type	Default	Description
appearance	'danger' 'none' 'success' 'warning'	'none'	Appearance of the field and help text elements.
label	React.ReactNode		Optional label for the field component.
helpText	string		Help text displaying optional hints or validation messages under the field.
helpIcon	React.FC<IconProps>		Icon supporting the help text message.
showHelpText	boolean		Control to conditionally show the help text and icon.
id*	string		ID of the textarea
lines	number	'2'	Number of lines to be rendered for the user to input text

FormField.Input

Name	Type	Default	Description
appearance	'danger' 'none' 'success' 'warning'	'none'	Appearance of the field and help text elements.
label	React.ReactNode		Optional label for the field component.
helpText	string		Help text displaying optional hints or validation messages under the field.
helpIcon	React.FC<IconProps>		Icon supporting the help text message.
showHelpText	boolean		Control to conditionally show the help text and icon.
append	React.ReactNode		SVG icon to be displayed on input.
disabled	boolean		Disables the input, disallowing user interaction.
data-testid	string		This is an attribute used to identify a DOM node for testing purposes.
appendPosition	'end' 'start'	'start'	Sent icon display position