## PinInput  
Capture pin code or one time password from the user.  
Category: Inputs  

### Usage

### Length

Set `length` prop to control number of rendered fields.

```python
import dash_mantine_components as dmc

component = dmc.Group(dmc.PinInput(length=8), justify="center")
```
### Type

By default, PinInput accepts letters and numbers. To allow numbers only, set `type="number"`:

```python
import dash_mantine_components as dmc

component = dmc.Group(dmc.PinInput(type="number"), justify="center")
```
### Placeholder
Set `placeholder` to change placeholder of all fields. Note that it only accepts strings.

```python
import dash_mantine_components as dmc

component = dmc.Group(dmc.PinInput(placeholder="⊡"), justify="center")
```
### Disabled state

```python
import dash_mantine_components as dmc

component = dmc.Group(dmc.PinInput(disabled=True), justify="center")
```
### Error state

```python
import dash_mantine_components as dmc

component = dmc.Group(dmc.PinInput(error=True), justify="center")
```
### Masked

```python
import dash_mantine_components as dmc

component = dmc.Group(dmc.PinInput(mask=True), justify="center")
```
### One Time Code

Some operating systems expose last received SMS code to be used by applications like your keyboard.
If the current form input asks for this code, your keyboard adapts and proposes the code as keyboard-suggestion.
Prop `oneTimeCode` makes your input setting `autocomplete="one-time-code"` which allows using that feature.

```python
import dash_mantine_components as dmc

component = dmc.Group(dmc.PinInput(oneTimeCode=True), justify="center")
```
### Accessibility

Inputs do not have associated labels, set aria-label to make component visible to screen reader:

```python
import dash_mantine_components as dmc

component = dmc.Group(
    dmc.PinInput(oneTimeCode=True, **{"aria-label": "One Time Code"}), justify="center"
)
```
### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


| Name     | Static selector            | Description        |
|:---------|:---------------------------|:-------------------|
| root     | .mantine-PinInput-root     | Root element       |
| pinInput | .mantine-PinInput-pinInput | Input item wrapper |
| input    | .mantine-PinInput-input    | Input element      |


### Keyword Arguments
#### PinInput

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- ariaLabel (string; optional):
    `aria-label` for the inputs.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- autoFocus (boolean; optional):
    If set, the first input is focused when component is mounted,
    `False` by default.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- disabled (boolean; optional):
    If set, `disabled` attribute is added to all inputs.

- error (boolean; optional):
    If set, adds error styles and `aria-invalid` attribute to all
    inputs.

- form (string; optional):
    Hidden input `form` attribute.

- gap (string | number; optional):
    Key of `theme.spacing` or any valid CSS value to set `gap` between
    inputs, numbers are converted to rem, `'md'` by default.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- inputMode (a value equal to: 'none', 'text', 'tel', 'email', 'search', 'url', 'numeric', 'decimal'; optional):
    `inputmode` attribute, inferred from the `type` prop if not
    specified.

- inputType (optional):
    Inputs `type` attribute, inferred from the `type` prop if not
    specified.

- length (number; optional):
    Number of inputs, `4` by default.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- manageFocus (boolean; optional):
    Determines whether focus should be moved automatically to the next
    input once filled, `True` by default.

- mask (boolean; optional):
    Changes input type to `"password"`, `False` by default.

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- name (string; optional):
    Hidden input `name` attribute.

- oneTimeCode (boolean; optional):
    Determines whether `autocomplete="one-time-code"` attribute
    should be set on all inputs, `True` by default.

- persisted_props (list of strings; optional):
    Properties whose user interactions will persist after refreshing
    the component or the page. Since only `value` is allowed this prop
    can normally be ignored.

- persistence (string | number | boolean; optional):
    Used to allow user interactions in this component to be persisted
    when the component - or the page - is refreshed. If `persisted` is
    truthy and hasn't changed from its previous value, a `value` that
    the user has changed while using the app will keep that change, as
    long as the new `value` also matches what was given originally.
    Used in conjunction with `persistence_type`. Note:  The component
    must have an `id` for persistence to work.

- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):
    Where persisted user changes will be stored: memory: only kept in
    memory, reset on page refresh. local: window.localStorage, data is
    kept after the browser quit. session: window.sessionStorage, data
    is cleared once the browser quit.

- placeholder (string; optional):
    Inputs placeholder, `'○'` by default.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set
    `border-radius`, numbers are converted to rem,
    `theme.defaultRadius` by default.

- readOnly (boolean; optional):
    If set, the user cannot edit the value.

- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):
    Controls inputs `width` and `height`, `'sm'` by default.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- type (a value equal to: 'number', 'alphanumeric'; optional):
    Determines which values can be entered, `'alphanumeric'` by
    default.

- value (string; optional):
    Controlled component value.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.