@highlight-ui/sandbox-form-field

Installation

Using npm:

npm install @highlight-ui/sandbox-form-field

Using yarn:

yarn add @highlight-ui/sandbox-form-field

Using pnpm:

pnpm install @highlight-ui/sandbox-form-field

In your (S)CSS file:

@import url('@highlight-ui/sandbox-form-field');

Once the package is installed, you can import the library:

import {
  FormField,
  FormFieldView,
  InputFormField,
  SelectFormField,
  TextAreaFormField,
} from '@highlight-ui/sandbox-form-field';

Usage

import React, { useState } from 'react';
import { FormField } from '@highlight-ui/sandbox-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.