Label

Reference

• The Label component is a styled <label> element that applies specific styles based on the theme provided via a ThemeProvider.
• It provides <label> element for forms or other UI elements.
• Dynamically applies font size, line height, and padding.

Props

• size: Font size for the label.
• lineHeight: Line height for the label.
• paddingBottom: Padding below the label.

Usage Example

function Example(pageContext) {
  const { protrakComponents } = React.useContext(customWidgetContext);
  const { Label } = protrakComponents;
  return (
    <form>
      <Label htmlFor="username">Username</Label>
      <input id="username" type="text" />
    </form>
  );
};

• The Label component is used to label the input field with id="username".
• The styles for the label (font size, line height, padding) are dynamically applied based on the theme.