7.2.7 • Published 2 months ago
@highlight-ui/sandbox-form-field v7.2.7
@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.