@highlight-ui/form-field

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