Skip to main content

InputBox

Reference​

  • InputBox is a styled input element.
  • It uses props to dynamically apply styles, making it highly customizable.
  • It relies on a theme object (likely provided via a ThemeProvider from styled-components) to access predefined color palettes, font variants, and other design tokens.

Props​

  • boxSizing
  • height
  • color
  • border
  • borderColor
  • borderRadius
  • outline
  • fontSize
  • fontFamily
  • width
  • padding
  • textAlign
  • margin
  • marginTop
  • placeHolder

Usage​

const { protrakComponents } = React.useContext(customWidgetContext);
const { InputBox } = protrakComponents;

    <InputBox
      boxSizing="content-box"
      height="40px"
      color="PrimaryText"
      border="2px solid"
      borderColor="PRIMARY"
      borderRadius="8px"
      outline="none"
      fontFamily="Arial, sans-serif"
      width="300px"
      padding="10px"
      textAlign="left"
      margin="10px"
      marginTop="5px"
      placeHolder="Enter text here"
    />

UI​

InputBox