@fluentui/react-northstar
Version:
A themable React component library.
73 lines (72 loc) • 3.55 kB
TypeScript
import { Accessibility, CheckboxBehaviorProps } from '@fluentui/accessibility';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { ChildrenComponentProps, UIComponentProps } from '../../utils';
import { ComponentEventHandler, ShorthandValue, FluentComponentStaticProps } from '../../types';
import { BoxProps } from '../Box/Box';
import { TextProps } from '../Text/Text';
import { SupportedIntrinsicInputProps } from '../../utils/htmlPropsUtils';
export interface CheckboxSlotClassNames {
label: string;
indicator: string;
}
export interface CheckboxProps extends UIComponentProps, ChildrenComponentProps {
/** Accessibility behavior if overridden by the user. */
accessibility?: Accessibility<CheckboxBehaviorProps>;
/** A checkbox can be checked by default. */
defaultChecked?: SupportedIntrinsicInputProps['defaultChecked'];
/** A checkbox's checked state can be controlled. */
checked?: SupportedIntrinsicInputProps['checked'] | 'mixed';
/** A checkbox can appear disabled and be unable to change states. */
disabled?: SupportedIntrinsicInputProps['disabled'];
/** A checkbox's indicator icon can be customized. */
indicator?: ShorthandValue<BoxProps>;
/** A checkbox can render a label next to its indicator. */
label?: ShorthandValue<TextProps>;
/** A checkbox's label can be rendered in different positions. */
labelPosition?: 'start' | 'end';
/**
* Called after a checkbox's checked state is changed.
* @param event - React's original SyntheticEvent.
* @param data - All props.
*/
onChange?: ComponentEventHandler<Omit<CheckboxProps, 'checked'> & {
checked: boolean;
}>;
/**
* Called after a checkbox is clicked.
* @param event - React's original SyntheticEvent.
* @param data - All props.
*/
onClick?: ComponentEventHandler<Omit<CheckboxProps, 'checked'> & {
checked: boolean;
}>;
/** A checkbox can be formatted to show an "on or off" choice. */
toggle?: boolean;
}
export declare type CheckboxStylesProps = Pick<CheckboxProps, 'checked' | 'disabled' | 'labelPosition' | 'toggle'>;
export declare const checkboxClassName = "ui-checkbox";
export declare const checkboxSlotClassNames: CheckboxSlotClassNames;
/**
* A Checkbox allows a user to make a choice between two mutually exclusive options.
*
* @accessibility
* Implements [ARIA Checkbox](https://www.w3.org/TR/wai-aria-practices-1.1/#checkbox) design pattern.
*/
export declare const Checkbox: (<TExtendedElementType extends React.ElementType<any> = "div">(props: React.RefAttributes<HTMLDivElement> & Omit<import("@fluentui/react-bindings").PropsOfElement<TExtendedElementType>, "as" | keyof CheckboxProps> & {
as?: TExtendedElementType;
} & CheckboxProps) => JSX.Element) & {
propTypes?: React.WeakValidationMap<CheckboxProps> & {
as: React.Requireable<string | ((props: any, context?: any) => any) | (new (props: any, context?: any) => any)>;
};
contextTypes?: PropTypes.ValidationMap<any>;
defaultProps?: Partial<CheckboxProps & {
as: "div";
}>;
displayName?: string;
readonly __PRIVATE_PROPS?: React.RefAttributes<HTMLDivElement> & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
}, "as" | keyof CheckboxProps> & {
as?: "div";
} & CheckboxProps;
} & FluentComponentStaticProps<CheckboxProps>;