Earth Design System

API reference docs for theFieldcomponent. For examples and details on the usage of this component, visit the component demo page.

Props

Props	Type	Description	Default
`children`	`React.ReactNode`	Input component like TextInput, Textarea.
`description?`	`React.ReactNode`	Provide additional information that will aid user input.	_
`errorMessage?`	`React.ReactNode`	Message to show when the field is invalid.	_
`controlId?`	`string`	Specifies the unique identifier for the form control within the component. This ID is used to associate the input, textarea, select, button etc with its label or other descriptive elements.	_
`isDisabled?`	`boolean`	Whether the field is disabled.	`false`
`isRequired?`	`boolean`	Whether user input is required on the field before form submission.	`false`
`label`	`React.ReactNode`	Label for the field.	_
`labelVisibility?`	`'hidden' \| 'visible'`	A label must always be provided for assistive technology, but you may hide it from sighted users when the intent can be inferred from context.	`'visible'`
`secondaryLabel?`	`React.ReactNode`	Additional context, typically used to indicate that the field is optional.	_
`size?`	`'standard' \| 'large'`	The size of the field.	`'standard'`
`counter?`	`CounterObjProps`	Counter object containing `maxValue`, `value` and `isAlwaysVisible`.	_
`counter.maxValue?`	`number`	Maximum value the counter can reach.	_
`counter.value?`	`number`	Current value of the counter.	_
`counter.isAlwaysVisible?`	`boolean`	Whether the counter is always visible.	`false`