@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
94 lines (92 loc) • 2.52 kB
TypeScript
import React from 'react';
import { NonCancelableEventHandler } from '../internal/events';
/**
* @awsuiSystem core
*/
import { BaseCheckboxProps } from './base-checkbox';
export interface CheckboxProps extends BaseCheckboxProps {
/**
* The control's label that's displayed next to the checkbox. A state change occurs when a user clicks on it.
* @displayname label
*/
children?: React.ReactNode;
/**
* Specifies that the component is in an indeterminate state. The behavior of this property replicates
* the behavior of [the respective property](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes)
* in the native control.
*/
indeterminate?: boolean;
/**
* Called when the user changes the component state. The event `detail` contains the current value for the `checked` property.
*/
onChange?: NonCancelableEventHandler<CheckboxProps.ChangeDetail>;
/**
* Specifies whether to add `aria-required` to the native control.
*/
ariaRequired?: boolean;
/**
* @awsuiSystem core
*/
/**
* Attributes to add to the native `input` element.
* Some attributes will be automatically combined with internal attribute values:
* - `className` will be appended.
* - Event handlers will be chained, unless the default is prevented.
*
* We do not support using this attribute to apply custom styling.
*
* @awsuiSystem core
*/
}
export declare namespace CheckboxProps {
interface Ref {
/**
* Sets input focus onto the UI control.
*/
focus(): void;
}
interface ChangeDetail {
checked: boolean;
indeterminate: false;
}
interface Style {
input?: {
fill?: {
checked?: string;
default?: string;
disabled?: string;
indeterminate?: string;
readOnly?: string;
};
stroke?: {
checked?: string;
default?: string;
disabled?: string;
indeterminate?: string;
readOnly?: string;
};
check?: {
stroke?: {
checked?: string;
disabled?: string;
indeterminate?: string;
readOnly?: string;
};
};
focusRing?: {
borderColor?: string;
borderRadius?: string;
borderWidth?: string;
};
};
label?: {
color?: {
checked?: string;
default?: string;
disabled?: string;
indeterminate?: string;
readOnly?: string;
};
};
}
}