FormElement component displays a user input field
npm install @paprika/form-elementFormElement component displays a user input field
```
yarn add @paprika/form-element
or with npm:
``
npm install @paprika/form-element
| Prop | Type | required | default | Description |
| ----------- | -------------------------------------------------------------------------------------------- | -------- | ----------------------------- | -------------------------------------------------------------------------------------- |
| children | node | true | - | FormElement sub components and layout elements. |
| hasFieldSet | bool | false | false | FormElement contains multiple children so Renders a legend element instead of label. |
| id | string | false | "" | id attribute for the input field DOM element (will be auto-generated if not supplied). |
| isDisabled | bool | false | false | Should be disabled or not, default is false. |
| isOptional | bool | false | false | If input is an optional field and should be indicated. |
| isRequired | bool | false | false | If input is a required field. |
| size | [ FormElement.types.size.SMALL, FormElement.types.size.MEDIUM, FormElement.types.size.LARGE] | false | FormElement.types.size.MEDIUM | Size of the label, error, help and description (font size, min-height, padding, etc). |
| Prop | Type | required | default | Description |
| -------- | ----------- | -------- | ------- | --------------------------------------------------------------------------------------------- |
| children | [func,node] | true | - | Input field and layout elements. May be a render function with a11yProps object and refLabel. |
a11yProps includes: { id, disabled?, "aria-disabled"?, "aria-describedby"?, "aria-required"? }
refLabel is a React ref for the |
| Prop | Type | required | default | Description |
| -------- | ---- | -------- | ------- | ---------------------------------------- |
| children | node | false | null | Content for the form element description |
| Prop | Type | required | default | Description |
| -------- | ------ | -------- | ----------------------- | ---------------------------- |
| children | node | false | null | Content of the error message |
| size | custom | false | Error.types.size.MEDIUM | |
| Prop | Type | required | default | Description |
| -------- | ---- | -------- | ------- | ----------------------------------------- |
| children | node | false | null | Content for the form element instructions |
| Prop | Type | required | default | Description |
| ---------------- | ----------------------------------------------------------------------------------------------------------- | -------- | ----------------------- | ----------------------------------------------------------- |
| children | node | true | - | content for the label |
| help | node | false | null | Help indicator |
| helpA11yText | string | false | null | Aria label for icon button that triggers help popover |
| isDisabled | bool | false | null | If the label should be dimmed and the help popover disabled |
| isVisuallyHidden | bool | false | false | Should label be hidden |
| helpAlign | [ Popover.types.align.TOP, Popover.types.align.RIGHT, Popover.types.align.BOTTOM, Popover.types.align.LEFT] | false | Popover.types.align.TOP | change tooltip alignment |
| helpZIndex | number | false | null | zIndex for help tooltip |
| Prop | Type | required | default | Description |
| -------- | ---- | -------- | ------- | -------------------------- |
| children | node | false | null | Content of the flex parent |
| Prop | Type | required | default | Description |
| -------- | --------------- | -------- | ------- | --------------------------------------------------------------------------- |
| children | node | false | null | Content for left column flex child (typically the Label) |
| width | [number,string] | false | "auto" | Width of the left column as number (pixels) or string (any CSS width value) |
| Prop | Type | required | default | Description |
| -------- | ---- | -------- | ------- | --------------------------------------------------------------------------- |
| children | node | false | null | Content for right column flex child (typically everything except the Label) |
Props are the same as FormElement but hasFieldSet=true.
The component is a required context provider that must wrap the (or your application) for proper localization.
`jsx
import Input from "@paprika/input";
import FormElement from "@paprika/form-element";
const { Label, Content } = FormElement;
{a11yProps => (
onChange={handleChange}
value={value}
{...a11yProps}
/>
)}
`
Best practices for laying out supporting content for a form input is to follow this order:
- first.
- above the input field contained in .
- or shown below input field (but do not render both at the same time).
Note: the component will render null if its children is falsey.
`jsx
import Input from "@paprika/input";
import FormElement from "@paprika/form-element";
const { Label, Content, Instructions, Description, Error } = FormElement;
const errorMsg = "There was an error.";
{a11yProps => (
)}
{errorMsg
?
:
}
`
Since a group of or components consist of multiple inputs, each with their own
For this purpose, the
component can be used. It is provided as a named import from the same @paprika/form-element package.The
component has all the same subcomponents as the – it actually _is_ just a with the hasFieldSet prop set to true.
`jsx
import DatePicker from "@paprika/checkbox";
import { Fieldset } from "@paprika/form-element";const { Label, Content, Error } = Fieldset;
``- Storybook Showcase
- GitHub source code
- Create GitHub issue
- CHANGELOG