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.

Checkbox

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

Wrap one <input type="checkbox"> and label inside the ids-wc-checkbox component.

Note that ids-wc-checkbox only accepts one input and label each.

There was an error
NameDescriptionDefaultControl
Checkbox group
compact
Will reduce the margins between the checkboxes
false
legend
Sets the legend around the checkbox group
""
novalidation
Prevents validation on entire group
false
slots
For checkboxes (ids-checkbox)
-
error-msg
For an IDS error message
-
tooltip
For a tooltip (ids-tooltip)
-
Checkbox
block
Sets width to 100%
false
indeterminate
Sets the indeterminate state
false
invalid
Reflects the validity of the checkbox
false
light
Light version (white background)
false
novalidation
Prevents validation
false
slots
Default slot for an input of type checkbox and a label
-
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
-

Labels

You can omit the label.

No label

Long label

States

A required checkbox is marked as invalid if unchecked.

Checkbox group

Validation

Validation is performed on checked event and on form submit.

This must be clicked

No validation

Validation can be turned off by supplying novalidation.

This must be clicked

Individual error messages

Select checkbox 1
Select checkbox 2

Shared error message

Select the required ones

Accessibility

Screen reader support is handled automatically.