@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.