UNPKG

2.32 kBTypeScriptView Raw
1import * as React from "react";
2import { PseudoBoxProps } from "../PseudoBox";
3import { Omit } from "../common-types";
4
5type Variant = "outline" | "unstyled" | "flushed" | "filled";
6type Size = "sm" | "md" | "lg";
7
8export interface IInput<T = HTMLInputElement> {
9 /**
10 * If `true`, the input will be disabled.
11 * This sets `aria-disabled=true` and you can style this state by passing `_disabled` prop
12 */
13 isDisabled?: React.InputHTMLAttributes<T>["disabled"];
14 /**
15 * If `true`, the `input` will indicate an error.
16 * This sets `aria-invalid=true` and you can style this state by passing `_invalid` prop
17 *
18 */
19 isInvalid?: boolean;
20 /**
21 * If `true`, the input element will be required.
22 */
23 isRequired?: React.InputHTMLAttributes<T>["required"];
24 /**
25 * If `true`, the input element will span the full width of it's parent
26 */
27 isFullWidth?: boolean;
28 /**
29 * If `true`, prevents the value of the input from being edited.
30 */
31 isReadOnly?: React.InputHTMLAttributes<T>["readOnly"];
32 /**
33 * The visual size of the `input` element.
34 */
35 size?: Size;
36 /**
37 * The variant of the input style to use.
38 */
39 variant?: Variant;
40 /**
41 * The element or component to use in place of `input`
42 */
43 as?: React.ElementType;
44 /**
45 * [ARIA] The accessible label to use, in scenarios where the input as no visible label
46 */
47 "aria-label"?: React.AriaAttributes["aria-label"];
48 /**
49 * [ARIA] The id of the element that describes the input.
50 */
51 "aria-describedby"?: React.AriaAttributes["aria-describedby"];
52
53 /**
54 * The border color when the input is focused. Use color keys in `theme.colors`
55 * @example
56 * focusBorderColor = "blue.500"
57 */
58 focusBorderColor?: string;
59
60 /**
61 * The border color when the input is invalid. Use color keys in `theme.colors`
62 * @example
63 * errorBorderColor = "red.500"
64 */
65 errorBorderColor?: string;
66}
67
68export type OmittedTypes =
69 | "size"
70 | "disabled"
71 | "required"
72 | "checked"
73 | "defaultChecked"
74 | "readOnly";
75
76type InputHTMLAttributes = Omit<
77 React.InputHTMLAttributes<HTMLInputElement>,
78 OmittedTypes
79>;
80
81export type InputProps<T = HTMLInputElement> = IInput<T> &
82 PseudoBoxProps &
83 InputHTMLAttributes &
84 React.RefAttributes<T>;
85
86declare const Input: React.FC<InputProps>;
87
88export default Input;