Checkbox
Checkboxes allow users to select one or more items from a list of options.
Use the label attribute to provide a visible label for the Checkbox.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-checkbox label="Use signed Webhooks"></vwc-checkbox>
Use the helper-text attribute or slot to provide additional context or instructions for the Checkbox.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-checkbox label="Use signed Webhooks" helper-text="Signed Webhooks are a way to verify that the request is coming from Vonage." ></vwc-checkbox>
The checked property or current-checked attribute controls the checked state of the Checkbox.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-checkbox label="Use signed Webhooks" checked></vwc-checkbox>
Checkboxes support an indeterminate state, which indicates that the Checkbox is neither checked nor unchecked.
The indeterminate state is mainly used to implement Select all / none functionality.
Use the indeterminate property to set the Checkbox to indeterminate.
<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-checkbox label="Select all"></vwc-checkbox>
<script>
document.querySelector('vwc-checkbox').indeterminate = true;
</script>
Toggle the disabled member to disable/enable the Checkbox.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-checkbox disabled></vwc-checkbox> <vwc-checkbox disabled checked></vwc-checkbox>
Set the readonly member to specify a Checkbox is read-only.
A read-only Checkbox cannot be modified (however it can be focused and tabbed into).
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-checkbox readonly></vwc-checkbox> <vwc-checkbox readonly checked></vwc-checkbox>
The error-text attribute provides a custom error message. Any current error state will be overridden by error-text.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-checkbox label="I agree to the terms and conditions" error-text="You must agree to the terms and conditions to proceed" ></vwc-checkbox>
The success-text attribute provides a custom success message. Any current error state will be overridden by success-text.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-checkbox label="A default checkbox" success-text="Success text" checked ></vwc-checkbox>
Use the connotation attribute to set the Checkbox color.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-checkbox connotation="accent"></vwc-checkbox> <vwc-checkbox connotation="accent" checked></vwc-checkbox> <vwc-checkbox connotation="cta"></vwc-checkbox> <vwc-checkbox connotation="cta" checked></vwc-checkbox>