npm i -s @sikt/sds-input
import { TextInput } from "@sikt/sds-input";
import "@sikt/sds-input/dist/index.css";
<TextInput
label="Label"
onChange={() => {}}
value={value}
placeholder="Placeholder"
/>;
The Input component is a flexible input field component designed to handle different types of inputs.
- 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.
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.
Import stylesheet:
@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>