@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
77 lines (75 loc) • 2.5 kB
TypeScript
/// <reference types="../../index.d.ts" />
import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
import { CheckableFormComponent, MutableValidityState } from '../../utils/form';
import { InteractiveComponent } from '../../utils/interactive';
import { LabelableComponent } from '../../utils/label';
import { Scale, Status } from '../interfaces';
import { Label } from '../calcite-label/customElement.js';
export declare class Checkbox extends LitElement {
/**
* When `true`, the component is checked.
*
* @default false
*/
checked: boolean;
/**
* When `true`, interaction is prevented and the component is displayed with lower opacity.
*
* @default false
*/
disabled: boolean;
/**
* The `id` of the form that will be associated with the component.
*
* When not set, the component will be associated with its ancestor form element, if any.
*/
form: string;
/**
* When `true`, the component is initially indeterminate, which is independent from its `checked` value.
*
* The state is visual only, and can look different across browsers.
*
* @mdn [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes)
* @default false
*/
indeterminate: boolean;
/** Accessible name for the component. */
label: string;
/**
* Specifies the name of the component.
*
* Required to pass the component's `value` on form submission.
*/
name: string;
/**
* When `true` and the component resides in a form,
* the component must have a value in order for the form to submit.
*
* @default false
*/
required: boolean;
/**
* Specifies the size of the component.
*
* @default "m"
*/
scale: Scale;
/**
* Specifies the status of the input field, which determines message and icons.
*
* @default "idle"
*/
status: Status;
/**
* The current validation state of the component.
*
* @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
*/
readonly validity: MutableValidityState;
/** The component's value. */
value: any;
/** Sets focus on the component. */
setFocus(): Promise<void>;
/** Fires when the component's `checked` status changes. */
readonly calciteCheckboxChange: TargetedEvent<this, void>;
}