@limetech/lime-elements/dist/types/components/checkbox/checkbox.d.ts

Lime Elements

import { Label } from '../dynamic-label/label.types';
/**
 * The Checkbox component is a classic and essential element in UI design that allows
 * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to
 * select one or more items from a list of choices.
 *
 * ## States of a Checkbox
 * When a user clicks or taps on the box, it toggles between two states:
 * Checked and Unchecked.
 *
 * However, a Checkbox can visualize a third state called the "Indeterminate" state.
 * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.
 *
 * The Indeterminate state is typically used when dealing with checkbox groups
 * that have hierarchical relationships or when the group contains sub-items.
 * This state is used to indicate that that some, but not all, of the items in a group are selected.
 *
 * :::important
 * Checkboxes are sometimes used interchangeably with switches in user interfaces.
 * But there is an important difference between the two! Please read our guidelines about
 * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
 *
 * @exampleComponent limel-example-checkbox
 * @exampleComponent limel-example-checkbox-helper-text
 * @exampleComponent limel-example-checkbox-readonly
 */
export declare class Checkbox {
  /**
   * Disables the checkbox when `true`. Works exactly the same as `readonly`.
   * If either property is `true`, the checkbox will be disabled.
   */
  disabled: boolean;
  /**
   * Disables the checkbox when `true`. This visualizes the checkbox slightly differently.
   * But shows no visual sign indicating that the checkbox is disabled
   * or can ever become interactable.
   */
  readonly: boolean;
  /**
   * Set to `true` to indicate that the current value is invalid.
   */
  invalid: boolean;
  /**
   * The checkbox label.
   */
  label: string;
  /**
   * Optional helper text to display below the checkbox
   */
  helperText: string;
  /**
   * The value of the checkbox. Set to `true` to make the checkbox checked.
   */
  checked: boolean;
  /**
   * Enables indeterminate state. Set to `true` to signal indeterminate check.
   */
  indeterminate: boolean;
  /**
   * Set to `true` to indicate that the checkbox must be checked.
   */
  required: boolean;
  /**
   * The labels to use to clarify what kind of data is being visualized,
   * when the component is `readonly`.
   */
  readonlyLabels?: Array<Label<boolean>>;
  private modified;
  private shouldReinitialize;
  /**
   * Emitted when the input value is changed.
   */
  private change;
  private limelCheckbox;
  private id;
  private helperTextId;
  protected handleCheckedChange(newValue: boolean): void;
  protected handleIndeterminateChange(newValue: boolean): void;
  protected handleReadonlyChange(): void;
  componentDidRender(): void;
  connectedCallback(): void;
  componentDidLoad(): void;
  private destroyMDCInstances;
  disconnectedCallback(): void;
  render(): any;
  private isInvalid;
  private initialize;
  private getCheckboxElement;
  private onChange;
}
//# sourceMappingURL=checkbox.d.ts.map