FMX Prototype Pipeline

Input Group

Input with leading/trailing icon or text adornment. Container picks up focus styling.

<InputGroup placeholder="Type here" />

<InputGroup defaultValue="Maintenance request" />

<InputGroup
  placeholder="Search"
  leadingIcon={faMagnifyingGlass}
/>

<InputGroup
  placeholder="Pick a date"
  trailingIcon={faChevronDown}
/>

<InputGroup placeholder="0.00" leadingText="$" />

<InputGroup placeholder="0" trailingText="kg" />

$USD

<InputGroup
  placeholder="0.00"
  leadingText="$"
  trailingText="USD"
/>

<InputGroup
  defaultValue="bad value"
  error
  trailingIcon={faCircleExclamation}
/>

<InputGroup
  defaultValue="locked"
  disabled
  trailingIcon={faTableColumns}
/>

Props

leadingIcon:IconDefinition

Icon anchored to the left.

leadingText:string

Text adornment on the left (e.g. "$").

trailingIcon:IconDefinition

Icon anchored to the right.

trailingText:string

Text adornment on the right.

menu:ReactNode

Attached dropdown rendered below the trigger.

error:boolean= false

Error border treatment.

disabled:boolean= false

Disabled state.

Tokens