Checkbox

Use select boxes to allow users to select more than one option from a small group, or for opt in/out question. View this component on GitHub

Contents

Basic

Checkboxes are mainly used for more than one option. A single checkbox may be applied to enable selection inside another compoennt such as a row in a table, or in a card.

<admiralty-checkbox label-text="I agree"></admiralty-checkbox>

<admiralty-checkbox label-text="I agree"></admiralty-checkbox>

<AdmiraltyCheckbox label-text="I agree"></AdmiraltyCheckbox>

Multiple

Use select boxes to allow users to select more than one option.

<div style="display: flex; flex-direction: column">
    <admiralty-checkbox name="2023-checkbox" label-text="2023"></admiralty-checkbox>
    <admiralty-checkbox name="2022-checkbox" label-text="2022" checked="true"></admiralty-checkbox>
    <admiralty-checkbox name="2021-checkbox" label-text="2021"></admiralty-checkbox>
</div>

<div style="display: flex; flex-direction: column">
    <admiralty-checkbox name="2023-checkbox" label-text="2023"></admiralty-checkbox>
    <admiralty-checkbox name="2022-checkbox" label-text="2022" checked="true"></admiralty-checkbox>
    <admiralty-checkbox name="2021-checkbox" label-text="2021"></admiralty-checkbox>
</div>

<div style={{ display: "flex", flexDirection: "column" }}>
    <AdmiraltyCheckbox name="2023-checkbox" label-text="2023"></AdmiraltyCheckbox>
    <AdmiraltyCheckbox name="2022-checkbox" label-text="2022" checked={true}></AdmiraltyCheckbox>
    <AdmiraltyCheckbox name="2021-checkbox" label-text="2021"></AdmiraltyCheckbox>
</div>

Right justified

To introduce the checkbox selection, used in our filter pattern for example.

<admiralty-checkbox label-text="I agree" checkbox-right="true"></admiralty-checkbox>

<admiralty-checkbox label-text="I agree" checkbox-right="true"></admiralty-checkbox>

<AdmiraltyCheckbox label-text="I agree" checkbox-right={true}></AdmiraltyCheckbox>

Accessibility

Built to enable keyboard navigation, ensure users can easily select a checkbox and labelling is clear.

Props

NameTypeDefaultDescriptioncheckbox-rightbooleanfalseWhether the checkbox should be positioned to the right of the label.checkedbooleanfalseIf true, the checkbox is selected.disabledbooleanfalseThis dictates whether the form field is disabled.label-hiddenbooleanfalseThis visually hides the labelText while preserving accessibility.label-textstringnullThe label text must be provided and is displayed beside the checkbox, use the labelHidden property to control its visibility.namestringthis.inputIdThe name of the control, which is submitted with the form data.valueanyundefinedThe value of the checkbox does not mean if it's checked or not, use the checked property for that. The value of a checkbox is analogous to the value of an <input type="checkbox">, it's only used when the checkbox participates in a native <form>.

Events

NameDescriptionadmiraltyChangeEvent is fired when the form control changes statecheckboxBlurEvent is fired when the form control loses focuscheckboxFocusEvent is fired when the form control gains focus

Methods

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

NameDescription--admiralty-checkbox-font-sizeFont size of the checkbox--admiralty-checkbox-font-weightFont weight of the checkbox--admiralty-checkbox-input-marginMargin for the checkbox input.--admiralty-checkbox-input-paddingPadding for the checkbox input.--admiralty-checkbox-label-alignment-padding-leftPadding left for the checkbox label alignment.--admiralty-checkbox-label-alignment-padding-rightPadding right for the checkbox label alignment.--admiralty-checkbox-label-margin-bottomMargin bottom for the checkbox label.--admiralty-checkbox-label-padding-leftPadding left for the checkbox label.

Slots

No slots available for this component.

Privacy PolicyAccessibility