JsonInput

Capture json data from user

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

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

Your package.json

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

Disabled

import { JsonInput } from '@mantine/core';

function Demo() {
  return <JsonInput disabled />;
}

Input props

Your package.json

Placeholder

Label

Description

Error

Variant

Radius

Size

Disabled

With asterisk

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

Go back

Input – @mantine/core

Up next

MultiSelect – @mantine/core

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
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

Name	Static selector	Description
wrapper	.mantine-JsonInput-wrapper	Root Input element
icon	.mantine-JsonInput-icon	Input icon wrapper on the left side of the input, 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

Learn more about Styles API

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on GitHub GitHub discussions

Project

Mantine UI Documentation GitHub organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter