Input

Retrieve text input from a user.

Standard

Basic input field.

Sizes

Inputs of different sizes.

Set width

Specify width or other styles.

unwritable

Disable interactive inputs.

inline label

Show a short label in the line.

block label

Labels for custom styles.

status

Differentiate states by color.

Icon

Specify an icon component.

Clearable

Add a clear button in the input box.

Password

Get Change

Capture changes in input.

With useInput

Use hooks to capture changes.

Imperative API

Update component in an uncontrolled way.

APIs / Schnittstellendokumentation

Input.Props

AttributeDescriptionTypeAccepted valuesDefault
valueinput valuestring--
initialValueinitial valuestring--
placeholderplaceholderstring--
sizeinput sizeNormalSizesInputSizesmedium
statuscurrent statusNormalTypesInputStatusdefault
readOnlynative attrboolean-false
disableddisable inputboolean-false
clearableshow clear iconboolean-false
labeltext label for inputstring--
labelRighttext label at right for inputstring--
iconicon for inputReact.ReactNode--
iconRighticon at right for inputReact.ReactNode--
iconClickableicons are clickableboolean-false
onIconClickclick icon event(e: React.ChangeEvent) => void--
onChangechange event(e: React.ChangeEvent) => void--
onClearClickclear icon event(e: React.MouseEvent) => void--
refforwardRefRef<HTMLInputElement | null>--
...native propsInputHTMLAttributes'alt', 'type', 'className', ...-

Input.Password.Props

AttributeDescriptionTypeAccepted valuesDefault
hideTogglehide toggle iconboolean-false
...input propsInput.PropsInput.Props-

InputSizes

type InputSizes = 'mini' | 'small' | 'medium' | 'large'

InputStatus

type InputStatus = 'default' | 'secondary' | 'success' | 'warning' | 'error'

useInput

type useInput = (
  initialValue: string,
) => {
  state: string
  setState: Dispatch<SetStateAction<string>>
  currentRef: MutableRefObject<string>
  reset: () => void
  bindings: {
    value: string
    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
  }
}

Co-Creators