Input.InputBox

View Source

A base component used in Input as well as SegmentedControl, Select, and TokenInput.

// Example of how these components are used together, use Input if you need a regular input.
render(
  <Input.InputBox>
    <Input.InputField placeholder="Enter a value" />
  </Input.InputBox>
)

// Example of how these components are used together, use Input if you need a regular input.
render(
  <Input.InputBox>
    <Input.InputField placeholder="Enter a value" />
  </Input.InputBox>
)

Props

Accepts StackView props.

backgroundColorstring

Changes background color of the input. Both theme colors and html values are supported.

childrenReactNode

Typically accepts a form control like input or Input.InputField.

disabledboolean

Adds disabled styling. Please note this does not disable functionality and the respective child component should handle disabling interactions.

evenPaddingboolean

Uses an even amount of padding based on the vertical padding of the computed size prop.

focusChildIndexnumber

Which child index should be focused when the focus method is called.

focusChildrenOnFocusboolean

Determines if a child should be focused when InputBox receives focus. This is mostly useful for the Input and TokenInput components. Other components like Select set this to false.

idstring | number

Used to identify an input.

includeSpacingboolean

Adds a spacing prop to the internal StackView based on the padding size calculated from size prop.

innerRefRefCallback

Gain access to the internal ref

isLoadingboolean

Renders a Spinner at the end of the input box. Overrides renderRight and onClear when provided.

nakedboolean

Removes stroke or background styling.

onClear(event?: MouseEvent<HTMLButtonElement>) => void

readOnlyboolean