FloatingLabel

Description

Floating Label is used to add an animated label to other components. It is not meant as a stand alone component.

Install from Artifactory

• 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

Floating Label Props

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