JsonInput
Capture json data from user
Import
Source
Docs
Package
Usage
JsonInput is based on Textarea component, it includes json validation logic and option to format input value on blur:
Controlled
Input props
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
Get input ref
Accessibility
Provide aria-label
in case you use component without label for screen reader support:
JsonInput component props
Name | Type | Description |
---|---|---|
autosize | boolean | If true textarea will grow with content until maxRows are reached |
defaultValue | string | Default value for uncontrolled input |
description | ReactNode | Input description, displayed after label |
descriptionProps | Record<string, any> | Props spread to description element |
disabled | boolean | Disabled input state |
error | ReactNode | Displays error message after input |
errorProps | Record<string, any> | Props spread to error element |
formatOnBlur | boolean | Format json on blur |
icon | ReactNode | Adds icon on the left side of input |
iconWidth | Width<string | number> | Width of icon section in px |
id | string | Id is used to bind input and label, if not passed unique id will be generated for each input |
inputContainer | (children: ReactNode) => ReactNode | Input container component, defaults to React.Fragment |
inputWrapperOrder | ("input" | "label" | "error" | "description")[] | Controls order of the Input.Wrapper elements |
label | ReactNode | Input label, displayed before input |
labelProps | Record<string, any> | Props spread to label element |
maxRows | number | Defines maxRows in autosize variant, not applicable to regular variant |
minRows | number | Defined minRows in autosize variant and rows in regular variant |
onChange | (value: string) => void | onChange value for controlled input |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Input border-radius from theme or number to set border-radius in px |
required | boolean | Adds required attribute to the input and red asterisk on the right side of label |
rightSection | ReactNode | Right section of input, similar to icon but on the right |
rightSectionProps | Record<string, any> | Props spread to rightSection div element |
rightSectionWidth | Width<string | number> | Width of right section, is used to calculate input padding-right |
size | "xs" | "sm" | "md" | "lg" | "xl" | Input size |
validationError | ReactNode | Error message shown when json is not valid |
value | string | Value for controlled input |
variant | "unstyled" | "default" | "filled" | Defines input appearance, defaults to default in light color scheme and filled in dark |
withAsterisk | boolean | Determines whether required asterisk should be rendered, overrides required prop, does not add required attribute to the input |
wrapperProps | Record<string, any> | Props passed to root element |
JsonInput component Styles API
Name | Static selector | Description |
---|---|---|
wrapper | .mantine-JsonInput-wrapper | Root Input element |
invalid | .mantine-JsonInput-invalid | Invalid input modifier |
disabled | .mantine-JsonInput-disabled | Invalid disabled modifier |
icon | .mantine-JsonInput-icon | Input icon wrapper on the left side of the input, controlled by icon prop |
withIcon | .mantine-JsonInput-withIcon | Input element styles when used with icon, controlled by icon prop |
input | .mantine-JsonInput-input | Main input element |
rightSection | .mantine-JsonInput-rightSection | Input right section, controlled by rightSection prop |
root | .mantine-JsonInput-root | Root element |
label | .mantine-JsonInput-label | Label element styles, defined by label prop |
error | .mantine-JsonInput-error | Error element styles, defined by error prop |
description | .mantine-JsonInput-description | Description element styles, defined by description prop |
required | .mantine-JsonInput-required | Required asterisk element styles, defined by required prop |