TextInput

Usage

The TextInput component is a styled input element.

Size

There are three options for the size of the text input, "medium" is the default.

Placeholder

Building a custom input

TextInput is itself built on the same toolkit this package exports for building other input-like components — useInputStyles is what CurrencyInput, DurationInput, DatePicker, Combobox, SelectInput and others use so every input in the system shares one visual language (border, focus ring, invalid/disabled states, sizing) without duplicating it.

import { useInputStyles } from '@balance-web/text-input';

const MyInput = (props) => {
  const styles = useInputStyles({ shape: 'square', size: 'medium' });

  return <input css={styles} {...props} />;
};

inputBoxSizes is the rendered height per size (xsmall/small/medium/large) that useInputStyles derives its own sizing from — useful when a sibling element needs to line up with an input's height without rendering one.

Adornment and AdornmentWrapper position an icon or button inside an input, aware of the input's shape and size. TextInput uses them internally for its invalid-state icon; SearchInput's source is a complete worked example of composing a raw <input> with both:

const baseStyles = useInputStyles({ size, shape: 'round' });

return (
  <AdornmentWrapper shape="round" size={size}>
    <Adornment align="left">
      <SearchIcon size="small" />
    </Adornment>
    <input css={baseStyles} type="search" {...consumerProps} />
  </AdornmentWrapper>
);