Floating Label is used to add an animated label to other components. It is not meant as a stand alone component.
- Verify that you have access to (https://docs.int.bayer.com/cloud/devops/artifactory/)[Bayer Artifactory]
- Verify your token is correctly set up in your .npmrc as per the link above
- Verify you have the @element scope configured in your .npmrc
@element:registry=https://artifactory.bayer.com/artifactory/api/npm/npm-platforms-engineering/
- Install the component and themes bundles
-
npm i @element/react-components @element/themes
- alternatively install the component individually along with the themes bundle
npm i @element/react-floating-label @element/themes
| Name |
Type |
Default |
Required |
Description |
| className |
string |
undefined |
false |
The css class name to be passed through to the component markup. |
| float |
boolean |
false |
false |
The label will appear in the floating state. |
| htmlFor |
string |
empty string |
false |
The id of the component to trigger on active |
| shake |
boolean |
false |
false |
The label will shake briefly when set. |
Floating Label Render Props
| Name |
Type |
Default |
Required |
Description |
| children |
React.ReactNode |
null |
true |
Content to be rendered inside the label. Expects a string, though accepts any valid markup. |
Floating Label Breaking Changes
| Description |
label (removed): Use children instead. |
