@blueprintjs/core/lib/esm/components/forms/controls.d.ts

Core styles & components

import * as React from "react";
import { Alignment } from "../../common";
import { HTMLInputProps, Props } from "../../common/props";
export interface ControlProps extends Props, HTMLInputProps, React.RefAttributes<HTMLLabelElement> {
    /**
     * Alignment of the indicator within container.
     *
     * @default Alignment.LEFT
     */
    alignIndicator?: Alignment;
    /** Whether the control is checked. */
    checked?: boolean;
    /** JSX label for the control. */
    children?: React.ReactNode;
    /** Whether the control is initially checked (uncontrolled mode). */
    defaultChecked?: boolean;
    /** Whether the control is non-interactive. */
    disabled?: boolean;
    /** Whether the control should appear as an inline element. */
    inline?: boolean;
    /** Ref attached to the HTML `<input>` element backing this component. */
    inputRef?: React.Ref<HTMLInputElement>;
    /**
     * Text label for the control.
     *
     * Use `children` or `labelElement` to supply JSX content. This prop actually supports JSX elements,
     * but TypeScript will throw an error because `HTMLAttributes` only allows strings.
     */
    label?: string;
    /**
     * JSX Element label for the control.
     *
     * This prop is a workaround for TypeScript consumers as the type definition for `label` only
     * accepts strings. JavaScript consumers can provide a JSX element directly to `label`.
     */
    labelElement?: React.ReactNode;
    /** Whether this control should use large styles. */
    large?: boolean;
    /** Event handler invoked when input value is changed. */
    onChange?: React.FormEventHandler<HTMLInputElement>;
    /**
     * Name of the HTML tag that wraps the checkbox.
     *
     * By default a `<label>` is used, which effectively enlarges the click
     * target to include all of its children. Supply a different tag name if
     * this behavior is undesirable or you're listening to click events from a
     * parent element (as the label can register duplicate clicks).
     *
     * @default "label"
     */
    tagName?: keyof JSX.IntrinsicElements;
}
export interface SwitchProps extends ControlProps {
    /**
     * Text to display inside the switch indicator when checked.
     * If `innerLabel` is provided and this prop is omitted, then `innerLabel`
     * will be used for both states.
     *
     * @default innerLabel
     */
    innerLabelChecked?: string;
    /**
     * Text to display inside the switch indicator when unchecked.
     */
    innerLabel?: string;
}
/**
 * Switch component.
 *
 * @see https://blueprintjs.com/docs/#core/components/switch
 */
export declare const Switch: React.FC<SwitchProps>;
export type RadioProps = ControlProps;
/**
 * Radio component.
 *
 * @see https://blueprintjs.com/docs/#core/components/radio
 */
export declare const Radio: React.FC<RadioProps>;
export interface CheckboxProps extends ControlProps {
    /** Whether this checkbox is initially indeterminate (uncontrolled mode). */
    defaultIndeterminate?: boolean;
    /**
     * Whether this checkbox is indeterminate, or "partially checked."
     * The checkbox will appear with a small dash instead of a tick to indicate that the value
     * is not exactly true or false.
     *
     * Note that this prop takes precendence over `checked`: if a checkbox is marked both
     * `checked` and `indeterminate` via props, it will appear as indeterminate in the DOM.
     */
    indeterminate?: boolean;
}
/**
 * Checkbox component.
 *
 * @see https://blueprintjs.com/docs/#core/components/checkbox
 */
export declare const Checkbox: React.FC<CheckboxProps>;