| 1 | import type * as React from "react";
|
| 2 | import type { Alignment } from "../../common";
|
| 3 | import type { HTMLInputProps, Props } from "../../common/props";
|
| 4 | export interface CheckedControlProps {
|
| 5 | /** Whether the control is checked. */
|
| 6 | checked?: boolean;
|
| 7 | /** Whether the control is initially checked (uncontrolled mode). */
|
| 8 | defaultChecked?: boolean;
|
| 9 | /** Event handler invoked when input value is changed. */
|
| 10 | onChange?: React.ChangeEventHandler<HTMLInputElement>;
|
| 11 | }
|
| 12 | /**
|
| 13 | * Shared props for form control components like Switch, Checkbox, and Radio.
|
| 14 | */
|
| 15 | export interface ControlProps extends CheckedControlProps, Props, HTMLInputProps, React.RefAttributes<HTMLLabelElement> {
|
| 16 | /**
|
| 17 | * Alignment of the indicator within container.
|
| 18 | *
|
| 19 | * @default Alignment.LEFT
|
| 20 | */
|
| 21 | alignIndicator?: Alignment;
|
| 22 | /** JSX label for the control. */
|
| 23 | children?: React.ReactNode;
|
| 24 | /** Whether the control is non-interactive. */
|
| 25 | disabled?: boolean;
|
| 26 | /** Whether the control should appear as an inline element. */
|
| 27 | inline?: boolean;
|
| 28 | /** Ref attached to the HTML `<input>` element backing this component. */
|
| 29 | inputRef?: React.Ref<HTMLInputElement>;
|
| 30 | /**
|
| 31 | * Text label for the control.
|
| 32 | *
|
| 33 | * Use `children` or `labelElement` to supply JSX content. This prop actually supports JSX elements,
|
| 34 | * but TypeScript will throw an error because `HTMLAttributes` only allows strings.
|
| 35 | */
|
| 36 | label?: string;
|
| 37 | /**
|
| 38 | * JSX element label for the control.
|
| 39 | *
|
| 40 | * This prop is a workaround for TypeScript consumers as the type definition for `label` only
|
| 41 | * accepts strings. JavaScript consumers can provide a JSX element directly to `label`.
|
| 42 | */
|
| 43 | labelElement?: React.ReactNode;
|
| 44 | /** Whether this control should use large styles. */
|
| 45 | large?: boolean;
|
| 46 | /**
|
| 47 | * Name of the HTML tag that wraps the checkbox.
|
| 48 | *
|
| 49 | * By default a `<label>` is used, which effectively enlarges the click
|
| 50 | * target to include all of its children. Supply a different tag name if
|
| 51 | * this behavior is undesirable or you're listening to click events from a
|
| 52 | * parent element (as the label can register duplicate clicks).
|
| 53 | *
|
| 54 | * @default "label"
|
| 55 | */
|
| 56 | tagName?: keyof React.JSX.IntrinsicElements;
|
| 57 | }
|