# @askrjs/ui/input

> Published API exports for @askrjs/ui/input.

Source: [https://askrjs.com/docs/reference/api/ui/input](https://askrjs.com/docs/reference/api/ui/input)

Status: stable. Packages: @askrjs/ui/input.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 10 exports from the declarations shipped by @askrjs/ui.

### `DebouncedInput`

```ts
DebouncedInput: (props: DebouncedInputProps) => JSX.Element
```

DebouncedInput is a convenience wrapper around Input that emits a settled
value for search and filter surfaces.

### `DebouncedInputProps`

```ts
DebouncedInputProps: Omit<InputInputProps, 'onInput' | 'type'> & {
  type?: JSX.IntrinsicElements['input']['type'];
  debounceMs?: number;
  onInput?: (event: InputEvent) => void;
  onDebouncedInput?: (value: string) => void;
}
```

Props for Debounced Input.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `debounceMs`: debounceMs?: number | undefined;

- `onDebouncedInput`: onDebouncedInput?: ((value: string) => void) | undefined;

- `onInput`: onInput?: ((event: InputEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLInputElement>;

- `type`: type?: ReactiveProp<IntrinsicTextValue>;

### `Input`

```ts
Input: { (props: InputInputProps): JSX.Element; (props: InputAsChildProps): JSX.Element; }
```

Renders the `input` part of `input`.

Supports polymorphic rendering via `asChild`.

### `INPUT_A11Y_CONTRACT`

```ts
INPUT_A11Y_CONTRACT: { readonly HOST_ELEMENT: "input"; readonly DISABLED_ATTRIBUTES: { readonly native: "disabled"; readonly asChild: "disabled"; }; readonly DATA_ATTRIBUTES: { readonly disabled: "data-disabled"; }; readonly FOCUS_RULES: { readonly defaultTabIndex: 0; readonly disabledTabIndex: -1; }; readonly LABELING: { readonly supportsLabelElement: true; readonly supportsAriaLabel: true; readonly supportsAriaLabelledBy: true; }; }
```

Native input semantics wrapped by askr-ui Input.

### `InputA11yContract`

```ts
InputA11yContract: typeof INPUT_A11Y_CONTRACT
```

Type of the Input A11y Contract object.

### `InputAsChildProps`

```ts
InputAsChildProps: InputOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<Element>;
}
```

Props for the `asChild` (polymorphic) rendering of Input.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `ref`: ref?: Ref<Element>;

- `tabIndex`: tabIndex?: number | undefined;

### `InputEvent`

```ts
InputEvent: Event & {
  currentTarget: HTMLInputElement;
  target: HTMLInputElement;
}
```

Input Event.

### `InputInputProps`

```ts
InputInputProps: Omit<JSX.IntrinsicElements['input'], 'children' | 'ref'> & InputOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLInputElement>;
}
```

Props for Input Input.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLInputElement>;

### `InputOwnProps`

```ts
InputOwnProps: {
  children?: unknown;
  disabled?: boolean;
  tabIndex?: number;
}
```

Own props for Input, before merging with native element attributes.

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `tabIndex`: tabIndex?: number | undefined;

### `InputProps`

```ts
InputProps: InputInputProps | InputAsChildProps
```

Props for Input.

- `asChild`: asChild?: boolean | undefined;

- `children`: children?: unknown;

- `ref`: ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLInputElement | null) => void) | { current: HTMLInputElement | null; } | null | undefined;

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/ui/checkbox/index.md) | [Next](https://askrjs.com/docs/reference/api/ui/form/index.md)