JsonInput组件用于输入和验证JSON字符串. 默认情况下合法的JSON在失去焦点时会自动格式化.
JsonInput组件基于TextArea, 因此继承了TextArea组件的属性
| 属性名 | 类型 | 是否必须 | 默认值 | 说明 |
|---|---|---|---|---|
| autosize | boolean | undefined | no | faslse | Determines whether the textarea height should grow with its content |
| color | string | undefined | no | ||
| defaultValue | string | undefined | no | Default value for uncontrolled component | |
| description | React.ReactNode | no | Contents of <code>Input.Description</code> component. If not set, description is not rendered. | |
| descriptionProps | Record<string, any> | undefined | no | Props passed down to the <code>Input.Description</code> component | |
| disabled | boolean | undefined | no | Sets <code>disabled</code> attribute on the <code>input</code> element | |
| error | React.ReactNode | no | Determines whether the input should have error styles and <code>aria-invalid</code> attribute | |
| errorProps | Record<string, any> | undefined | no | Props passed down to the <code>Input.Error</code> component | |
| formatOnBlur | boolean | undefined | no | true | Determines whether the value should be formatted on blur |
| id | string | undefined | no | Static id used as base to generate <code>aria-</code> attributes, by default generates random id | |
| inputContainer | ((children: ReactNode) => ReactNode) | undefined | no | (children) => children | Input container component |
| inputWrapperOrder | ("input" | "label" | "error" | "description")[] | undefined | no | ['label', 'description', 'input', 'error'] | Controls order of the elements |
| label | React.ReactNode | no | Contents of <code>Input.Label</code> component. If not set, label is not rendered. | |
| labelElement | "div" | "label" | undefined | no | "label" | <code>Input.Label</code> root element |
| labelProps | Record<string, any> | undefined | no | Props passed down to the <code>Input.Label</code> component | |
| leftSection | React.ReactNode | no | Content section rendered on the left side of the input | |
| leftSectionPointerEvents | PointerEvents | undefined | no | "none" | Sets <code>pointer-events</code> styles on the <code>rightSection</code> element |
| leftSectionWidth | Width<string | number> | undefined | no | Left section width, used to set <code>width</code> of the section and input <code>padding-left</code>, by default equals to the input height | |
| maxRows | number | undefined | no | Maximum rows for autosize textarea to grow, ignored if <code>autosize</code> prop is not set | |
| minRows | number | undefined | no | Minimum rows of autosize textarea, ignored if <code>autosize</code> prop is not set | |
| multiline | boolean | undefined | no | false | Determines whether the input can have multiple lines, for example when <code>component="textarea"</code> |
| onChange | ((value: string) => void) | undefined | no | Called when value changes | |
| pointer | boolean | undefined | no | false | Determines whether the input should have <code>cursor: pointer</code> style |
| radius | string | undefined | no | "md" | Key of <code>theme.radius</code> or any valid CSS value to set <code>border-radius</code>, numbers are converted to rem |
| required | boolean | undefined | no | Sets <code>required</code> attribute on the <code>input</code> element | |
| resize | Resize | undefined | no | "none" | Controls <code>resize</code> CSS property |
| rightSection | React.ReactNode | no | Content section rendered on the right side of the input | |
| rightSectionPointerEvents | PointerEvents | undefined | no | "none" | Sets <code>pointer-events</code> styles on the <code>rightSection</code> element |
| rightSectionWidth | Width<string | number> | undefined | no | Right section width, used to set <code>width</code> of the section and input <code>padding-right</code>, by default equals to the input height | |
| size | string | undefined | no | "sm" | Controls input <code>height</code> and horizontal <code>padding</code> |
| slots | { left?: string | undefined; input?: string | undefined; right?: string | undefined; } | undefined | no | ||
| value | string | undefined | no | Value for controlled component | |
| variant | "outline" | "default" | "ghost" | undefined | no | "outline" | input variant |
| withAria | boolean | undefined | no | true | Determines whether <code>aria-</code> and other accessibility attributes should be added to the input |
| withAsterisk | boolean | undefined | no | false | Determines whether the required asterisk should be displayed. Overrides <code>required</code> prop. Does not add required attribute to the input. |
| withErrorStyles | boolean | undefined | no | true | Determines whether the input should have red border and red text color when the <code>error</code> prop is set |
| wrapperProps | Record<string, any> | undefined | no | Props passed down to the root element of the <code>Input</code> component |