TextInput
=========

*   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)

The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use "@bonniernews/dn-design-system-web/components/text-input/text-input";`

### [](#javascript)Javascript

_The javascript is only needed for text fields of type password_

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

| Name | Description | Default |
|:--- | :--- | :--- |
| name\* | It's used as name and id<br />string | \- |
| type | text, password, email, etc<br />"number", "text", "search", "time", "image", "color", "date", "datetime-local" | "text" |
| label\* | A label for the input<br />string | \- |
| error | Used if error state shoud be set on load<br />boolean | \- |
| errorMessage | What error message that should be displayed<br />string | \- |
| required | boolean | \- |
| disabled | Set to true if the field should be disabled<br />boolean | \- |
| validation | To use with the sites validation, some example values for dn-web: required, password, email<br />string | \- |
| helpText | A helptext for the field if needed<br />string | \- |
| forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | \- |
| autofocus | Set to true if field should have focus when loaded<br />boolean | \- |
| classNames | Ex. "my-special-class"<br />string | ", " |
| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |

```jsx
<TextInput
  label="Användarnamn"
  name="username"
/>
```