@sikt/sds-input

Consume

npm i -s @sikt/sds-{form,input}

React

import { TextInput } from "@sikt/sds-input";
import "@sikt/sds-form/dist/index.css";
import "@sikt/sds-input/dist/index.css";

<TextInput
  label="Label"
  onChange={() => {}}
  value={value}
  placeholder="Placeholder"
/>;

Input Component

The Input component is a flexible input field component designed to handle different types of inputs.

Available types

• TextArea: Allows multi-line text input.
• TextInput: Standard single-line text input.
• NumberInput: Accepts numerical input.
• EmailInput: Specifically designed for email input.
• PasswordInput: Secured input for password entry.
• TelInput: For entering telephone numbers.
• SearchInput: Optimized for search functionality with a custom clear icon button.

SearchInput

The SearchInput features a custom clear icon button. Note that clearing the input field when pressing the Escape key is a built-in default feature.

It is important to note that in Firefox, clicking the clear button causes the SearchInput field to lose focus. However, this has been adressed by reassigning focus to the SearchInput using the useRef hook.

Stylesheets & custom markup

Import stylesheet:

@import url("@sikt/sds-form");
@import url("@sikt/sds-input");

Create custom markup:

<div class="sds-input">
  <label className="sds-input__label" for="nameInput">Name</label>
  <div className="sds-input__wrapper">
    <input
      className="sds-input__input"
      id="nameInput"
      type="text"
      placeholder="Placeholder name"
    />
  </div>
  <div className="sds-input__help-text">Enter your name</div>
</div>