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} />;
}

Input props

Component supports all props from Input and InputWrapper components:

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"
required
/>
);
}

Get input ref

import { useRef } from 'react';
import { JsonInput } from '@mantine/core';
function Demo() {
const ref = useRef<HTMLTextAreaElement>();
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