v4.2.12

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:

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
Go back
InputWrapper – @mantine/core
Up next
MultiSelect – @mantine/core
Build fully functional accessible web applications faster than ever
About
ContributeMedia assetsChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter