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:

<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
Size
<JsonInput
placeholder="Your package.json"
label="Your package.json"
required
/>

Get input ref

You can get textarea ref with ref prop:

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

Accessibility

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

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

TypeScript

Component props type

Import component props type:

import type { JsonInputProps } from '@mantine/core';

JsonInputProps extends React.ComponentPropsWithoutRef<'input'>, all other props are available under Component props tab.

JsonInputStylesNames type

JsonInputStylesNames type is a union with JsonInput Styles API names:

import type { JsonInputStylesNames } from '@mantine/core';
const jsonInputClasses: Partial<Record<JsonInputStylesNames, 'string'>> = {
label: 'json-input-label',
description: 'json-input-description',
};
<JsonInput classNames={jsonInputClasses} />;

See full styles descriptions list under Styles API tab.

Build fully functional accessible web applications faster than ever
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback