@yamada-ui/toggle
Version:
Yamada UI toggle component
73 lines (69 loc) • 2.36 kB
text/typescript
import { HTMLUIProps, ThemeProps, CSSUIProps, ComponentArgs } from '@yamada-ui/core';
import { RefAttributes, ReactElement } from 'react';
interface ToggleGroupContext extends ThemeProps<"Button"> {
controlled: boolean;
disabled?: boolean;
readOnly?: boolean;
value?: (number | string)[] | number | string;
onChange?: <M extends number | string = string>(value: M | undefined) => void;
}
declare const useToggleGroup: () => ToggleGroupContext | undefined;
interface ToggleGroupOptions<Y extends (number | string)[] | number | string = string> {
/**
* The initial value of the toggle button group.
*/
defaultValue?: Y extends any[] ? Y : undefined | Y;
/**
* The CSS `flex-direction` property.
*
* @deprecated Use `flexDirection` instead.
*/
direction?: CSSUIProps["flexDirection"];
/**
* If `true`, all wrapped toggle button will be disabled.
*
* @default false
*/
disabled?: boolean;
/**
* If `true`, all wrapped toggle button will be disabled.
*
* @default false
*
* @deprecated Use `disabled` instead.
*/
isDisabled?: boolean;
/**
* If `true`, all wrapped toggle button will be readonly.
*
* @default false
*
* @deprecated Use `readOnly` instead.
*/
isReadOnly?: boolean;
/**
* If `true`, all wrapped toggle button will be readonly.
*
* @default false
*/
readOnly?: boolean;
/**
* The value of the toggle button group.
*/
value?: Y extends any[] ? Y : undefined | Y;
/**
* The callback fired when any children toggle button is selected or unselected.
*/
onChange?: (value: Y extends any[] ? Y : undefined | Y) => void;
}
/**
* `ToggleGroup` is a set of two-state buttons that can be toggled on or off.
*
* @see Docs https://yamada-ui.com/components/forms/toggle
*/
interface ToggleGroupProps<Y extends (number | string)[] | number | string = string> extends Omit<HTMLUIProps, "defaultValue" | "direction" | "onChange">, ThemeProps<"Toggle">, ToggleGroupOptions<Y> {
}
declare const ToggleGroup: {
<Y extends (number | string)[] | number | string = string>(props: RefAttributes<HTMLDivElement> & ToggleGroupProps<Y>): ReactElement;
} & ComponentArgs;
export { ToggleGroup, type ToggleGroupProps, useToggleGroup };