# CodeInput (/docs/products/dash-dots/reference/components/code-input)

Check the code in `onComplete`, not `onChange`.

**Children:** Nothing

## Example

![The CodeInput component](/assets/images/dash-dots/components/code-input.webp)

```xml title="view.dml"
<View gap="small">
  <CodeInput label="Enter the code we sent you" length="6" value="{{ code }}" onChange="setCode" onComplete="verify" />
  <If condition="{{ checking }}">
    <Text tone="muted">Checking your code…</Text>
  </If>
</View>
```

```ts title="controller.ts"
export default definePage({
  initialState: { code: '', checking: false },
  mutations: {
    setCode: (_state, event: ValueEvent) => ({ code: event.detail.value }),
    // Runs once all 6 digits are in.
    verify: (_state, event: ValueEvent) => ({ code: event.detail.value, checking: true }),
  },
});
```

## Props

| Prop       | Type      | What it is                                          |
| ---------- | --------- | --------------------------------------------------- |
| `value`    | `string`  |                                                     |
| `length`   | `number`  | Number of digits. Default: `6`.                     |
| `label`    | `string`  |                                                     |
| `hint`     | `string`  | Help shown under the field, which `error` replaces. |
| `error`    | `string`  | Shown under the field in red, in place of `hint`.   |
| `secure`   | `boolean` | Shows dots in place of the digits, as for a PIN.    |
| `disabled` | `boolean` | Dims it, and the person can't use it.               |

## Events

| Event        | Sends                   | Notes                     |
| ------------ | ----------------------- | ------------------------- |
| `onChange`   | `{ value }` in `detail` |                           |
| `onComplete` | `{ value }` in `detail` | When every box is filled. |