@thebase/ui/docs/components/input.md

CDN-installable Owl and Bootstrap 5 UI component library.

# Input

Use `b-ui="input"` on a native input element.

## Pure Owl component

```js
import { Input } from "@thebase/ui";
```

```base-ui
<div style="max-width: 28rem" class="w-100">
  <Input type="'email'" placeholder="'Email'"/>
</div>
```

| Prop | Type | Notes |
| --- | --- | --- |
| `value` | `String` | controlled value; the component never mutates it itself |
| `placeholder` | `String` | |
| `type` | `String` | native `<input type>` |
| `disabled` | `Boolean` | |
| `readonly` | `Boolean` | |
| `invalid` | `Boolean` | adds `is-invalid` |
| `className` | `String` | appended to the generated `form-control` class |
| `id` | `String` | forwarded to the rendered `<input>`, e.g. for `Label`'s `for` |
| `autocomplete` | `String` | forwarded to the rendered `<input>` |
| `ariaLabel` / `aria-label` | `String` | accessible name when there's no visible label |
| `min` / `max` / `step` | `String \| Number` | forwarded to the rendered `<input>`, for `type="number"`/date-like inputs |
| `list` | `String` | forwarded to the rendered `<input>`, pair with a `<datalist id="...">` for suggestions |
| `onInput` | `Function` | called as `(value, event)` on the native `input` event |
| `onChange` | `Function` | called as `(value, event)` on the native `change` event |

See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.

## Static component

```base-ui
<input b-ui="input" type="email" placeholder="name@example.com">
```

Options: use the native `type`, `placeholder`, `disabled`, `readonly`, `required`, and validation attributes.

Accessibility: provide a visible label or an `aria-label` when the input is not paired with `b-ui="field"`.

## CDN install requirements

Load `baseui.min.css` and `baseui.min.js`.

## Enhanced usage

Input is a static component. It can be mounted by `BaseUI.mountAll()` with no extra JavaScript.

## Methods

Use the global runtime methods: `BaseUI.mount()`, `BaseUI.mountAll()`, and `BaseUI.destroy()`.

## Events

Input does not emit custom BaseUI events. Use native `input` and `change` events.

## CSS variables

The component inherits BaseUI semantic tokens such as `--b-input`, `--b-border`, `--b-ring`, and `--b-radius`.

## Browser support

BaseUI targets modern evergreen browsers that support ES modules, CSS variables, and Bootstrap 5.3.

## Test checklist

Verify default, disabled, readonly, invalid, focus, placeholder, light theme, and dark theme states.