FormField

Description

Form Field is an atomic component most often by other input components such as Checkbox, Radio, Switch, and by another atomic component, InputLabel. The typical use-case for this component would be in developing a new input component.

Install bundle from npm-e

npm i @element-public/react-components @element-public/themes

Optional: install the component individually

npm i @element-public/react-form-field @element-public/themes

Open ~/.npmrc in an editor and add the following line to enable the @element-public scope:

@element-public:registry=https://npm.platforms.engineering

Troubleshooting

See below if you have never installed a package from Bayer's npm-enterprise or run into the following error:

npm ERR! code E401
npm ERR! Unable to authenticate, your authentication token seems to be invalid.
npm ERR! To correct this please trying logging in again with:
npm ERR!     npm login

Setup an access token

See the devtools npm-e guide to learn how to create an access token if this is the first time you are using a npm-e package at Bayer or you do not have a line that starts with the following in your ~/.npmrc file:

//npm.platforms.engineering/:_authToken=

Form Field Props

| Name | Type | Default | Required | Description | | --------- | --------- | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------ | | alignEnd | boolean | false | false | Reverse the order of the input and label. | | className | string | undefined | false | The css class name to be passed through to the component markup. | | inputRef | reference | null | false | The reference of the input the form field will be associated with. It enables a greater level of integration with parent components. |

Form Field Render Props

| Name | Type | Default | Required | Description | | -------- | --------------- | ------- | -------- | ---------------------------------------------------------------------- | | children | React.ReactNode | null | false | Content to be rendered inside the FormField. Accepts any valid markup. |