> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tappify.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# TapInput

> Renders a labelled text control with its hint and error, as an input or, with multiline, a textarea.

```ts theme={null}
function TapInput(props): ReactElement;
```

Renders a labelled text control with its hint and error, as an input or, with
`multiline`, a textarea.

## Parameters

### props

[`TapInputProps`](/extensions/reference/frontend-api/TypeAlias.TapInputProps)

## Returns

`ReactElement`

## Remarks

Generates an id when none is passed and binds the label, the hint and the error
to the control, so the field is announced whole; an `error` also sets
`aria-invalid` and the `--tap-danger` border. The textarea starts at four rows
and is resizable in height. Pass `type="checkbox"` with
`className="tap-control--checkbox"` for a boolean, which is what `TapForm`
does.

## Example

```tsx theme={null}
import { TapInput } from '@tappify/extension-sdk';

function TermField({ term, onTerm }: { term: string; onTerm: (next: string) => void }) {
  return (
    <TapInput
      label="Keyword"
      hint="One term per row in the report."
      value={term}
      onChange={event => onTerm(event.target.value)}
    />
  );
}
```