Checkbox

<gstock-checkbox> | GstockCheckbox

API

Properties

Name Description Reflects Type Default
checked Draws the checkbox in a checked state. Reflects boolean false
disabled Disables the checkbox. Reflects boolean false
form By default, form controls are associated with the nearest containing <form> element. This attribute allows you to place the form control outside of a form and associate it with the form that has this id. The form must be in the same document or shadow root for this to work. Reflects string ''
indeterminate Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a “select all/none” behavior when associated checkboxes have a mix of checked and unchecked states. Reflects boolean false
required Makes the checkbox a required field. Reflects boolean false
size The size of the checkbox. Reflects 'small' | 'medium' | 'large' 'medium'
defaultChecked The default value of the form control. Primarily used for resetting the form control. boolean false
value The current value of the checkbox, submitted as a name/value pair with form data. Reflects string -
title The title of the checkbox. Reflects string ''
name The name of the checkbox, submitted as a name/value pair with form data. Reflects string ''
updateComplete

A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties .

Events

Name React Event Description Event Detail
gstock-blur-event onGstockBlurEvent Emitted when the checkbox loses focus. -
gstock-change-event onGstockChangeEvent Emitted when the checked state changes. -
gstock-focus-event onGstockFocusEvent Emitted when the checkbox gains focus. -
gstock-input-event onGstockInputEvent Emitted when the checkbox receives input. -
gstock-invalid-event onGstockInvalidEvent Emitted when the form control has been checked for validity and its constraints aren’t satisfied. -

Learn more about events .

Slots

Name Description
default The content of checkbox.

Learn more about slots .

Methods

Name Description
focus(
options: FocusOptions
) 		Sets focus on the checkbox.
click( ) Simulates a click on the checkbox.
blur( ) Removes focus from the checkbox
checkValidity( ) Returns true if the element meets all constraint validations, and false if some constraints are not satisfied.
getForm( ) Gets the associated form, if one exists.
reportValidity( ) Checks for validity and shows the browser’s validation message if the control is invalid.
setCustomValidity(
message: string
) 		Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear the custom validation message, call this method with an empty string.

Learn more about methods .

CSS Parts

Name Description
base The component’s base wrapper.
prefix The container that wraps the prefix.
control--checked Matches the control part when the checkbox is checked.
control--indeterminate Matches the control part when the checkbox is indeterminate.
checked-icon The checked icon, an <gstock-icon> element.
indeterminate-icon The indeterminate icon, an <gstock-icon> element.
label The container that wraps the checkbox’s label.

Learn more about CSS parts .

Dependencies

This component automatically imports the following dependencies.