Check

Control that allows a selection to be made.

Module

import '@capitec/omni-components/check';

content_copy

import { OmniCheck } from "@capitec/omni-components-react/check";

content_copy

Source

View on GitHub

Packages

@capitec/omni-components

@capitec/omni-components-react

Examples

Docs

Styles

Interactive

Label

Hint

Error Label

Checked

Indeterminate

Disabled

Slot

Custom Check Icon

Custom Indeterminate Icon

Interactive Label Hint Error Label Checked Indeterminate Disabled Slot Custom Check Icon Custom Indeterminate Icon

Properties

Name	Attribute	Type	Description
label	label	`string \| undefined`	Text label.
data	data	`object \| undefined`	Data associated with the component.
hint	hint	`string \| undefined`	Hint message to assist the user.
error	error	`string \| undefined`	An error message to guide users to correct a mistake.
checked	checked	`boolean \| undefined`	Indicator if the component is checked or not.
disabled	disabled	`boolean \| undefined`	Indicator if the component is disabled.
indeterminate	indeterminate	`boolean \| undefined`	Indicator if the component is in and indeterminate state.
dir	dir	`string`	Used to set the base direction of text for display
lang	lang	`string`	Used to identify the language of text content on the web

Events

Name	Type	Description
value-change	`CustomEvent<{ old: Boolean; new: Boolean; }>`	Dispatched when the control value is changed to either on or off.

Slots

Name	Description
`loading_indicator`	Used to define content that is displayed while async rendering is awaiting, or when renderLoading() is implicitly called
`[Default Slot]`	Content to render inside the component.
`indeterminate_icon`	Replaces the icon for the indeterminate state
`check_icon`	Replaces the icon for the checked state

Theme Variables

Name	Description
`--omni-theme-primary-color`	Theme primary color.
`--omni-theme-primary-hover-color`	Theme primary hover color.
`--omni-theme-primary-active-color`	Theme primary active color.
`--omni-theme-accent-color`	Theme accent color.
`--omni-theme-accent-hover-color`	Theme accent hover color.
`--omni-theme-accent-active-color`	Theme accent active color.
`--omni-theme-background-color`	Theme background color.
`--omni-theme-background-hover-color`	Theme background hover color.
`--omni-theme-background-active-color`	Theme background active color.
`--omni-theme-font-color`	Theme font color.
`--omni-theme-disabled-border-color`	Theme disabled border color.
`--omni-theme-disabled-background-color`	Theme disabled background color.
`--omni-theme-error-font-color`	Theme disabled background color.
`--omni-theme-error-border-color`	Theme error border color.
`--omni-theme-hint-font-color`	Theme hint font color.
`--omni-theme-inactive-color`	Theme inactive color.
`--omni-theme-box-shadow-color`	Theme inactive color.
`--omni-theme-font-family`	Theme font family.
`--omni-theme-font-size`	Theme font size.
`--omni-theme-font-weight`	Theme font weight.
`--omni-theme-border-radius`	Theme border radius.
`--omni-theme-border-width`	Theme border width.
`--omni-theme-box-shadow`	Theme box shadow.

Component Variables

Name	Description
`--omni-check-label-font-color`	Label font color.
`--omni-check-label-font-family`	Label font family.
`--omni-check-label-font-size`	Label font size.
`--omni-check-label-font-weight`	Label font weight.
`--omni-check-label-spacing`	Label spacing.
`--omni-check-hint-label-font-color`	Hint font color.
`--omni-check-hint-label-font-family`	Hint font family.
`--omni-check-hint-label-font-size`	Hint font size.
`--omni-check-hint-label-font-weight`	Hint font weight.
`--omni-check-hint-label-padding-top`	Hint top padding.
`--omni-check-error-label-font-color`	Error font color.
`--omni-check-error-label-font-family`	Error font family.
`--omni-check-error-label-font-size`	Error font size.
`--omni-check-error-label-font-weight`	Error font weight.
`--omni-check-error-label-padding-top`	Error top padding.
`--omni-check-width`	Width.
`--omni-check-height`	Height.
`--omni-check-background-color`	Background color.
`--omni-check-border-width`	Border width.
`--omni-check-border-color`	Border color.
`--omni-check-border-radius`	Border radius.
`--omni-check-indicator-border-width`	Indicator Border width.
`--omni-check-indicator-border-color`	Indicator Border color.
`--omni-check-indicator-color`	Indicator color.
`--omni-check-indicator-icon-width`	Indicator icon width.
`--omni-check-indicator-icon-height`	Indicator icon height.
`--omni-check-checked-background-color`	Checked Background color.
`--omni-check-indeterminate-background-color`	Indeterminate Background color.
`--omni-check-disabled-background-color`	Disabled Background color.
`--omni-check-disabled-border-color`	Disabled border color.
`--omni-check-hover-box-shadow`	Hover box shadow.
`--omni-check-hover-background-color`	Hover background color.