@paprika/form-element

Description

FormElement component displays a user input field

Installation

``
yarn add @paprika/form-element
`

or with npm:

`
npm install @paprika/form-element
`

Props

$3

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

$3

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

$3

| Prop | Type | required | default | Description |
| -------- | ---- | -------- | ------- | ---------------------------------------- |
| children | node | false | null | Content for the form element description |

$3

| Prop | Type | required | default | Description |
| -------- | ------ | -------- | ----------------------- | ---------------------------- |
| children | node | false | null | Content of the error message |
| size | custom | false | Error.types.size.MEDIUM | |

$3

| Prop | Type | required | default | Description |
| -------- | ---- | -------- | ------- | ----------------------------------------- |
| children | node | false | null | Content for the form element instructions |

$3

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

$3

| Prop | Type | required | default | Description |
| -------- | ---- | -------- | ------- | -------------------------- |
| children | node | false | null | Content of the flex parent |

$3

| 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) |

$3

| Prop | Type | required | default | Description |
| -------- | ---- | -------- | ------- | --------------------------------------------------------------------------- |
| children | node | false | null | Content for right column flex child (typically everything except the Label) |

$3

Props are the same as FormElement but hasFieldSet=true.

Usage

The component is a required context provider that must wrap the (or your application) for proper localization.

$3


`jsx
import Input from "@paprika/input";
import FormElement from "@paprika/form-element";

const { Label, Content } = FormElement;


First Name

{a11yProps => (
onChange={handleChange}
value={value}
{...a11yProps}
/>
)}


`

$3

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.";


Field label
Instruction text

{a11yProps => (

)}

{errorMsg
? {errorMsg}
: Description text
}

`

$3

Since a group of or components consist of multiple inputs, each with their own , then need to be wrapped in a