Form
Checkbox3.0
Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.
Ads by Tryg Careers
Installation
npm i @tryg/ui-libraryUsage
Individual only imports the desired component, and only needs to be included once within the application. Which is beneficial to keep the application size small.
<script type="module">
import { defineCustomElement } from '@tryg/ui-library/dist/components/anchor-checkbox';
defineCustomElement();
</script>
<anchor-checkbox>Checkbox label</anchor-checkbox>Global only needs to be defined once in the application, but it will import all components even the ones that are not in use..
<script type="module">
import { defineCustomElements } from '@tryg/ui-library/dist/loader';
defineCustomElements();
</script>
<anchor-checkbox>Checkbox label</anchor-checkbox>Checked
<anchor-checkbox checked>Checkbox label</anchor-checkbox>Disabled
<anchor-checkbox disabled>Checkbox label</anchor-checkbox>Indeterminate
The indeterminate prop sets a Checkbox to an indeterminate state, overriding its appearance and maintaining it until set to false, regardless of user interaction.
<anchor-checkbox indeterminate>Checkbox label</anchor-checkbox>Slots
- base: Checkbox wrapper, it handles alignment, placement, and general appearance.
- wrapper: An inner container that includes styles for relative positioning, flex properties, overflow handling and managing hover and selected states.
- icon: Icon within the checkbox, controlling size, visibility, and changes when checked.
- label: The text associated with the checkbox.
Accessibility
- Built with a native HTML
<input>element. - Full support for browser features like form autofill.
- Keyboard focus management and cross browser normalization.
- Keyboard event support for Tab and Space keys.
- Labeling support for assistive technology.
- Indeterminate state support.
API
Checkbox
<anchor-checkbox input-id="button-1" name="button-1" value="My Value">My Label</anchor-checkbox>Disabled Checkbox
<anchor-checkbox disabled>My Label</anchor-checkbox>Pre-checked Checkbox
<anchor-checkbox checked>My Label</anchor-checkbox>Checkbox w/background for use on colored backgrounds
<anchor-checkbox background>My Label</anchor-checkbox>Event Handling
Listening
The component events can be captured by adding an EventListener in vanilla javascript and React. Or by listening to emitted events in vue.
Vue
<anchor-checkbox @changedValue="myEventHandler"></anchor-checkbox>React/Vanilla HTML/JavaScript
document.addEventListener('changedValue', event => { ... /* Do stuff */ })Values
The component emits one event changedValue.
The event object contains the String value, and the boolean status of the Checkbox.
{ checked: true | false, value: "My Value" }Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
checked | checked | boolean | false | |
disabled | disabled | Disable the checkbox | boolean | false |
icon | icon | "activity" | "airplay" | "alarm" | "alert-circle" | "alert-octagon" | "alert-triangle" | "align-center" | "align-justify" | "align-left" | "align-right" | "anchor" | "aperture" | "archive" | "arrow-down" | "arrow-down-circle" | "arrow-down-left" | "arrow-down-right" | "arrow-left" | "arrow-left-circle" | "arrow-right" | "arrow-right-circle" | "arrow-up" | "arrow-up-circle" | "arrow-up-left" | "arrow-up-right" | "at-sign" | "award" | "band-aid" | "bar-chart" | "bar-chart-2" | "basket" | "battery" | "battery-charging" | "bell" | "bell-off" | "bluetooth" | "bold" | "bonus-tryghedsgruppen" | "book" | "book-open" | "bookmark" | "box" | "briefcase" | "calculator" | "calendar" | "camera" | "camera-off" | "cast" | "check" | "check-circle" | "check-square" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chevrons-down" | "chevrons-left" | "chevrons-right" | "chevrons-up" | "chrome" | "circle" | "clipboard" | "clock" | "cloud" | "cloud-drizzle" | "cloud-lightning" | "cloud-off" | "cloud-rain" | "cloud-snow" | "code" | "codepen" | "codesandbox" | "coffee" | "columns" | "command" | "company" | "compass" | "copy" | "corner-down-left" | "corner-down-right" | "corner-left-down" | "corner-left-up" | "corner-right-down" | "corner-right-up" | "corner-up-left" | "corner-up-right" | "cpu" | "credit-card" | "crop" | "crosshair" | "database" | "delete" | "disc" | "divide" | "divide-circle" | "divide-square" | "dollar-sign" | "download" | "download-cloud" | "dribbble" | "droplet" | "edit" | "edit-2" | "edit-3" | "external-link" | "eye" | "eye-off" | "facebook" | "fast-forward" | "feather" | "figma" | "file" | "file-minus" | "file-pdf" | "file-plus" | "file-text" | "film" | "filter" | "flag" | "folder" | "folder-minus" | "folder-plus" | "framer" | "frown" | "gift" | "git-branch" | "git-commit" | "git-merge" | "git-pull-request" | "github" | "gitlab" | "globe" | "grid" | "hard-drive" | "hash" | "headphones" | "heart" | "help-circle" | "hexagon" | "home" | "image" | "inbox" | "info" | "instagram" | "italic" | "key" | "layers" | "layout" | "life-buoy" | "link" | "link-2" | "linkedin" | "list" | "loader" | "lock" | "log-in" | "log-out" | "mail" | "map" | "map-pin" | "maximize" | "maximize-2" | "megaphone" | "meh" | "menu" | "message-circle" | "message-square" | "mic" | "mic-off" | "minimize" | "minimize-2" | "minus" | "minus-circle" | "minus-square" | "monitor" | "moon" | "more-horizontal" | "more-vertical" | "mouse-pointer" | "move" | "music" | "navigation" | "navigation-2" | "octagon" | "offer" | "package" | "paperclip" | "pause" | "pause-circle" | "pen-tool" | "percent" | "phone" | "phone-call" | "phone-forwarded" | "phone-incoming" | "phone-missed" | "phone-off" | "phone-outgoing" | "pie-chart" | "play" | "play-circle" | "plus" | "plus-circle" | "plus-square" | "pocket" | "power" | "printer" | "radio" | "refresh-ccw" | "refresh-cw" | "repeat" | "rewind" | "rotate-ccw" | "rotate-cw" | "rss" | "save" | "scissors" | "search" | "send" | "server" | "settings" | "share" | "share-2" | "shield" | "shield-off" | "shopping-bag" | "shopping-cart" | "shuffle" | "sidebar" | "skip-back" | "skip-forward" | "slack" | "slash" | "sliders" | "smartphone" | "smile" | "speaker" | "sprout" | "square" | "star" | "star-filled" | "stop-circle" | "storm" | "sun" | "sunrise" | "sunset" | "table" | "tablet" | "tag" | "target" | "terminal" | "thermometer" | "thumbs-down" | "thumbs-up" | "toggle-left" | "toggle-right" | "tool" | "trash" | "trash-2" | "trello" | "trending-down" | "trending-up" | "triangle" | "truck" | "trygfonden" | "tv" | "twitch" | "twitter" | "type" | "umbrella" | "underline" | "unlock" | "upload" | "upload-cloud" | "user" | "user-check" | "user-minus" | "user-plus" | "user-x" | "users" | "video" | "video-off" | "voicemail" | "volume" | "volume-1" | "volume-2" | "volume-x" | "watch" | "wifi" | "wifi-off" | "wind" | "x" | "x-circle" | "x-octagon" | "x-square" | "youtube" | "zap" | "zap-off" | "zoom-in" | "zoom-out" | this.indeterminate ? 'minus' : 'check' | |
indeterminate | indeterminate | Whether or not the checkbox is indeterminate. The indeterminate state is purely visual and does not change the checked value of the checkbox. | boolean | false |
name | name | This is the name for the entire checkbox group | string | undefined |
required | required | Mark the field as required | boolean | false |
uuid | uuid | Give this instance of checkbox a custom ID, or keep the default. | string | uuidv4() |
validityMissingValueText | validity-missing-value-text | Text to be displayed if when value is missing an native form validation is used | string | undefined |
value | value | This is the string that is returned as a value, when the form is submitted | string | 'Checkbox' |
Events
| Event | Description | Type |
|---|---|---|
toggled | CustomEvent<CheckboxEventDetail> |
Methods
toggleCheckbox(e?: any) => Promise<void>
Parameters
| Name | Type | Description |
|---|---|---|
e | any |
Returns
Type: Promise<void>
Dependencies
Depends on
Graph
Built with StencilJS
| Anchor version | Status | Notes |
|---|---|---|
| 3.0 | Ready for Implementation | This component is in sync with Figma. |