No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

Input

import "@inera/ids-core/components/form/input/register";

 // optional 
import "@inera/ids-core/components/form/error-message/register";

Wrap one label and input inside the ids-wc-input component.

Note that ids-wc-input only accepts one input and label each.
NameDescriptionDefaultControl
Input
autofocus
Set focus on input
false
invalid
Reflects the validity of the input
false
light
Light version (white background)
false
novalidation
Prevents validation
false
-
showsearchlabel
Shows the label even if input is of type 'search'.
(6.1.0)
false
-
slots
For an input and a label
-
button
For an button that will be lined up with the input
-
end-icon
For a font icon that will be shown at the end of the input
-
error-msg
For an IDS error message
-
tooltip
For a tooltip (ids-tooltip)
-
events
onInvalid
Runs when invalid becomes true
-
onValid
Runs when invalid becomes false
-

States







Error message

This field is missing something

Required with error message on blur

Validation is checked on blur event and on form submit.

This field is required

Hint

Can be used to visualize maxlength of an input field.

X av Y tecken
Hint
This field is required

Without validation

Validation can be turned off by supplying novalidation.

This is an error message
X av Y tecken
This is an error message

With icon


Inputs with type search should have a label but the label will not automatically be shown unless you set showsearchlabel to true.



Types

The IDS input is not supporting types regarding dates.

Intended use





Others


Accessibility

Remember that maxlength will not tell the screen reader if the maxlength is reached. A potential fix is to render a span with correct aria-labels, and remove it when maxlength is reached.

<span slot="hint" class="hidden" aria-live="assertive" role="alert">Max antal tecken uppnådda.</span>