Input.InputBox

View Source

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

Copy

Edit

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

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.

includeSpacingboolean

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

isLoadingboolean

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

nakedboolean

Removes stroke or background styling.

onClear() => void

Fires a callback from the clear button that is added inside the right side of the input box. Overrides renderRight when provided.

renderLeftReactReactNode

Allows rendering any content inside the beginning of the input box.

renderRightReactReactNode

Allows rendering any content inside the end of the input box.

size'xs' | 'sm' | 'md' | 'lg' | 'xl'

Size of the input padding, font-size, and line-height. Based on theming sizes.

state'error' | 'success'

State of the input. Useful for responding to user input and showing error and success states.

subduedboolean

Applies subdued styling when using InputBox as a secondary element.

Props

PreviousInput.Inline NextInput.InputField