UNPKG

1.96 kBTypeScriptView Raw
1import * as React from "react";
2import { BoxProps } from "../Box";
3
4import { Omit } from "../common-types";
5
6export interface IRadio {
7 /**
8 * id assigned to input
9 */
10 id?: string;
11 /**
12 * The name of the input field in a radio
13 * (Useful for form submission).
14 */
15 name?: string;
16 /**
17 * The value to be used in the radio button.
18 * This is the value that will be returned on form submission.
19 */
20 value?: string | number;
21 /**
22 * The aria-label attribute associated with the radio element
23 */
24 "aria-label"?: string;
25 /**
26 * The aria-labelledby attribute associated with the radio element
27 */
28 "aria-labelledby"?: string;
29 /**
30 * The color scheme of the radio.
31 *
32 * 🚨Note: This should be one of the color keys in the theme that has `100` - `900` color values (e.g.`green`, `red`).
33 * @see http://chakra-ui.com/theme#colors
34 */
35 variantColor?: string;
36 /**
37 * If `true`, the radio will be initially checked.
38 */
39 defaultIsChecked?: boolean;
40 /**
41 * If `true`, the radio will be checked.
42 * You'll need to pass `onChange` to update it's value (since it's now controlled)
43 */
44 isChecked?: boolean;
45 /**
46 * If `true`, the radio will occupy the full width of it's parent container
47 */
48 isFullWidth?: boolean;
49 /**
50 * The size of the radio button
51 */
52 size?: "lg" | "md" | "sm";
53 /**
54 * If `true`, the radio will be disabled
55 */
56 isDisabled?: boolean;
57 /**
58 * If `true`, the radio button will be invalid. This sets `aria-invalid` to `true`.
59 */
60 isInvalid?: boolean;
61 onChange?: React.ChangeEventHandler<HTMLInputElement>;
62 onBlur?: React.FocusEventHandler<HTMLInputElement>;
63 onFocus?: React.FocusEventHandler<HTMLInputElement>;
64 children?: React.ReactNode;
65}
66
67export type RadioProps = IRadio &
68 Omit<BoxProps, "onChange" | "ref" | "onFocus" | "onBlur" | "size"> &
69 React.RefAttributes<HTMLInputElement>;
70
71declare const Radio: React.FC<RadioProps>;
72export default Radio;