import type { BaseProps } from '~/types/component'; import type { BodyTextProps } from '../BodyText/types'; /** @deprecated custom sizes are no longer supported */ type Size = 'sm' | 'md' | 'lg'; type LabelPosition = 'right' | 'left'; type InputType = 'checkbox'; type BaseWithAria = BaseProps & React.AriaAttributes; export interface CheckboxProps extends BaseWithAria { /** * Indicates to the browser that the checkbox should receive focus as soon as * it mounts. See * [docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus) */ autoFocus?: boolean; /** * A boolean attribute indicate whether the checkbox is checked. See * [docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefchecked) */ checked?: boolean; /** * String descriptor for testing. */ 'data-tag'?: string; /** * Indicates the user should not be able to interact with the checkbox. See * [docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefdisabled) */ disabled?: boolean; /** * Hides the label from view and sets `aria-label` on the checkbox for * accessibility. A label should always be provided. */ hideLabel?: boolean; /** * HTML id property. */ id?: string; /** * A boolean attribute in addition to checked/unchecked which indicates that it is impossible * to say whether the item is toggled on or off. * [docs(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes)] */ indeterminate?: boolean; /** * Sets the label for the checkbox; required. To hide the label, see * `hideLabel` prop. */ label: string | JSX.Element; /** * Specifies the position of the label relative to the checkbox. */ labelPosition?: LabelPosition; /** * A string specifying a name for the checkbox control. This name is submitted * along with the control's value when the form data is submitted if the checkbox * is checked. */ name?: string; /** * Called when the checkbox loses focus. */ onBlur?: () => void; /** * Called when the checkbox is clicked */ onChange: (e: React.ChangeEvent) => void; /** * Called when the checkbox receives focus. */ onFocus?: () => void; /** * Specifies the role of the checkbox for screen readers. See * [docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques) */ role?: string; /** * Changes the text and padding sizes of the checkbox. `Sm`, `Md`, or `Lg` * @default 'md' * @deprecated custom sizes are no longer supported */ size?: Size; /** * Specifies the type of data being used in the checkbox. See * [docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox) */ type?: InputType; /** * A string specifying the value for the checkbox control. This is submitted * along with the control's name when the form data is submitted if the checkbox * is checked. */ value?: string; /** enabled flag or number representing the number of lines of the label to show */ ellipsis?: BodyTextProps['ellipsis']; } export {};