@highlight-ui/form-field
v7.3.2
Published
This is the FormField and FormFieldView component used in Personio
Downloads
3,982
Maintainers
Keywords
Readme
@highlight-ui/form-field
Installation
Using npm:
npm install @highlight-ui/form-field
Using yarn:
yarn add @highlight-ui/form-field
Using pnpm:
pnpm install @highlight-ui/form-field
In your (S)CSS file:
@import url('@highlight-ui/form-field');
Once the package is installed, you can import the library:
import {
FormField,
FormFieldView,
InputFormField,
SelectFormField,
TextAreaFormField,
} from '@highlight-ui/form-field';
Usage
import React, { useState } from 'react';
import { FormField } from '@highlight-ui/form-field';
export default function FormFieldExample() {
return (
<FormField
label="Input Field"
htmlFor="input-123"
hintText="Optional Help Text"
>
<Input id="input-123" type="text" placeholder="Type something here" />
</FormField>
);
}
Props 📜
FormField
| Prop | Type | Required | Default | Description |
| :-------------------------- | :------------------------------------------------- | :------- | :------ | :------------------------------------------------------------- |
| children
| React.ReactNode
| Yes | | The content inside the form field |
| label
| string
| Yes | | Label for the input field |
| horizontal
| boolean
| No | false
| Whether to use the horizontal layout of the form field |
| htmlFor
| string
| No | | Specify which HTML element the Label is for |
| labelTooltipContent
| TooltipProps['content']
| No | | The content to be displayed in the tooltip pop-out |
| labelTooltipMouseOutDelay
| TooltipProps['mouseOutDelay']
| No | | How quickly to hide the tooltip |
| helperText
| React.ReactNode
| No | | The text that will be displayed as a secondary label |
| hintText
| string
| No | | The grayed out, additional to the helperText
information. |
| validationsId
| string
| No | | The id of the validation info wrapper |
| validations
| Array<Omit<ValidationMessageProps, 'className'>>
| No | | An array of objects that represent different validation states |
FormFieldView
| Prop | Type | Required | Default | Description |
| :------------ | :---------------- | :------- | :------ | :----------------------------------------------------- |
| children
| React.ReactNode
| Yes | | The content inside the form field view |
| label
| string
| Yes | | Label for the field view |
| horizontal
| boolean
| No | false
| Whether to use the horizontal layout of the form field |
| placeholder
| string
| No | -
| The placeholder value |
InputFormField
The following props build on the FormField props listed above
| Prop | Type | Required | Default | Description |
| :----------- | :---------------------------------- | :------- | :------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| id
| string
| No | | The id applied to the input element |
| inputProps
| Omit<InputProps, 'outline' 'ref'>
| No | | The InputProps to pass down to the underlying Input component |
SelectFormField
The following props build on the FormField props listed above
| Prop | Type | Required | Default | Description |
| :------------ | :------------------------------------------ | :------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| selectProps
| Omit<SelectProps<T>, 'outline' 'variant'>
| Yes | | The SelectProps to pass down to the underlying Select component |
| id
| string
| No | | The id applied to the select element |
TextAreaFormField
The following props build on the FormField props listed above
| Prop | Type | Required | Default | Description |
| :-------------- | :------------------------------- | :------- | :------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| id
| string
| No | | The id applied to the select element |
| textAreaProps
| Omit<TextAreaProps, 'outline'>
| No | | The TextAreaProps to pass down to the underlying TextArea component |
Contributing 🖌️
Please visit personio.design for usage guidelines and visual examples.
If you're interested in contributing, please visit our contribution page.