JsonInput

Capture json data from user
Import

Usage

JsonInput is based on Textarea component, it includes json validation logic and option to format input value on blur:

import { JsonInput } from '@mantine/core';
function Demo() {
return (
<JsonInput
label="Your package.json"
placeholder="Textarea will autosize to fit the content"
validationError="Invalid JSON"
formatOnBlur
autosize
minRows={4}
/>
);
}

Controlled

import { useState } from 'react';
import { JsonInput } from '@mantine/core';
function Demo() {
const [value, setValue] = useState('');
return <JsonInput value={value} onChange={setValue} />;
}

Disabled state

import { JsonInput } from '@mantine/core';
function Demo() {
return <JsonInput disabled />;
}

Input props

Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
import { JsonInput } from '@mantine/core';
function Demo() {
return (
<JsonInput
placeholder="Your package.json"
label="Your package.json"
withAsterisk
/>
);
}

Get input ref

import { useRef } from 'react';
import { JsonInput } from '@mantine/core';
function Demo() {
const ref = useRef<HTMLTextAreaElement>(null);
return <JsonInput ref={ref} />;
}

Accessibility

Provide aria-label in case you use component without label for screen reader support:

<JsonInput /> // -> not ok, textarea is not labeled
<JsonInput label="package.json" /> // -> ok, textarea and label is connected
<JsonInput aria-label="package.json" /> // -> ok, label is not visible but will be announced by screen reader

JsonInput component props

NameTypeDescription
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
deserialize
(text: string, reviver?: (this: any, key: string, value: any) => any) => any
Function to deserialize string value, used for value formatting and input JSON validation, must throw error if string cannot be processed, JSON.parse by default
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
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
Called when value changes
radius
number | "xs" | "sm" | "md" | "lg" | "xl"
Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default
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
serialize
{ (value: any, replacer?: (this: any, key: string, value: any) => any, space?: string | number): string; (value: any, replacer?: (string | number)[], space?: string | number): string; }
Function to serialize value into a string, used for value formatting, JSON.stringify by default
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
Variants<"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

NameStatic selectorDescription
wrapper.mantine-JsonInput-wrapperRoot Input element
icon.mantine-JsonInput-iconInput icon wrapper on the left side of the input, controlled by icon prop
input.mantine-JsonInput-inputMain input element
rightSection.mantine-JsonInput-rightSectionInput right section, controlled by rightSection prop
root.mantine-JsonInput-rootRoot element
label.mantine-JsonInput-labelLabel element styles, defined by label prop
error.mantine-JsonInput-errorError element styles, defined by error prop
description.mantine-JsonInput-descriptionDescription element styles, defined by description prop
required.mantine-JsonInput-requiredRequired asterisk element styles, defined by required prop