- GitHub: [BonnierNews/dn-design-system/../web/src/components/text-input](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/text-input)
- Storybook: [Form > TextInput](https://designsystem.dn.se/?path=/docs/basic-form-textinput--docs)
- Storybook (Latest): [Form > TextInput](https://designsystem-latest.dn.se/?path=/docs/basic-form-textinput--docs)

----

# Text input

A standard text input. It can be used as password field if the corresponding type is set.

## Parameters

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
| name | String | yes | | | It's used as name and id |
| type | String | yes | text, password, email, etc | text | |
| label | String | yes | | | A label for the input |
| classNames | String | no | | | Ex. "my-special-class" |
| attributes | Object | no | | | Ex. { data-prop: value } |
| required | bool | no | true, false | false | |
| validation | String | no | | | To use with the sites validation, some example values for dn-web: required, password, email |
| helpText | String | no | | | A helptext for the field if needed |
| error | bool | no | true, false | false | Used if error state shoud be set on load |
| errorMessage | String | no | | | What error message that should be displayed |
| disabled | bool | no | true, false | false | Set to true if the field should be disabled |
| autoFocus | bool | no | true, false| false | Set to true if field should have focus when loaded |
| forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size

## Minimum requirement example

These are copy paste friendly examples to quickliy get started using a component.

### Nunjucks

```javascript
{% from '@bonniernews/dn-design-system-web/components/text-input/text-input.njk' import TextInput %}

{{ TextInput({
  name: "name",
  type: "text",
  label: "A label for the input"
})}}
```

### Scss

```scss
@use "@bonniernews/dn-design-system-web/components/text-input/text-input";
```

### Javascript

```javascript
import textInput from '@bonniernews/dn-design-system-web/components/text-input/text-input.js'
```

*The javascript is only needed for text fields of type password*