Mantine UIFAQColors generator

JsonInput

Capture json data from user

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:

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

JsonInput component supports Input and Input.Wrapper components features and all textarea element props. JsonInput documentation does not include all features supported by the component – see Input documentation to learn about all available features.

Input description

Variant
Size
Radius
import { JsonInput } from '@mantine/core';

function Demo() {
  return (
    <JsonInput
      label="Input label"
      description="Input description"
      placeholder="Input placeholder"
    />
  );
}

Disabled state

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

function Demo() {
  return (
    <JsonInput disabled defaultValue='{ "a": 1, "B": 2 }' label="Disabled" placeholder="Disabled" />
  );
}

Styles API

JsonInput supports Styles API, you can add styles to any inner element of the component withclassNames prop. Follow Styles API documentation to learn more.

Description

Error

Component Styles API

Hover over selectors to highlight corresponding elements

/*
 * Hover over selectors to apply outline styles
 *
 */

Get element ref

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

function Demo() {
  const ref = useRef<HTMLTextAreaElement>(null);
  return <JsonInput ref={ref} />;
}

Accessibility

If JsonInput is used without label prop, it will not be announced properly by screen reader:

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

// Inaccessible input – screen reader will not announce it properly
function Demo() {
  return <JsonInput />;
}

Set aria-label to make the input accessible. In this case label will not be visible, but screen reader will announce it:

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

// Accessible input – it has aria-label
function Demo() {
  return <JsonInput aria-label="My input" />;
}

If label prop is set, input will be accessible it is not required to set aria-label:

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

// Accessible input – it has associated label element
function Demo() {
  return <JsonInput label="My input" />;
}

Input

NativeSelect