v2.5.1
Discord
Source code

Building custom inputs

@mantine/core and @mantine/hooks come with all utilities that you need to build custom inputs. These examples with provide a reference on how to enhance existing components with extra logic to fit your needs and how to use mantine packages to create completely new accessible inputs based on Input and InputWrapper components.

Wrapped Textarea

First option to create custom input is to enhance existing Mantine component with extra logic and styles. In this example we will build JsonInput component that adds additional styles and validation logic to Textarea.

JsonInput uses autosize variant of Textarea component, which accepts json, validates and formats it.

import React, { useState } from 'react';
import { Textarea, useMantineTheme } from '@mantine/core';


interface JsonInputProps
  extends Omit<React.ComponentPropsWithoutRef<typeof Textarea>, 'error' | 'onChange'> {
  value: string;
  onChange(value: string): void;
}


export function JsonInput({ value, onChange, onBlur, onFocus, ...others }: JsonInputProps) {
  const [valid, setValid] = useState(true);
  const theme = useMantineTheme();


  return (
    <Textarea
      autosize
      value={value}
      minRows={2}
      error={!valid && 'Invalid json'}
      styles={{
        input: {
          fontFamily: theme.fontFamilyMonospace,
          fontSize: theme.fontSizes.xs,
        },
      }}
      onChange={(event) => onChange(event.currentTarget.value)}
      onFocus={(event) => {
        setValid(true);
        typeof onFocus === 'function' && onFocus(event);
      }}
      onBlur={(event) => {
        typeof onBlur === 'function' && onBlur(event);
        try {
          onChange(JSON.stringify(JSON.parse(event.currentTarget.value), null, 2));
        } catch (e) {
          setValid(false);
        }
      }}
      {...others}
    />
  );
}

Key parts:

  • Use styles or classNames to apply styles to any element (styles applied to input in this example)
  • onChange, onFocus, onBlur and all other input related props go directly to input element
  • Use typeof Textarea to get Textarea component props in TypeScript

Custom input with dropdown

Second option to create custom input is to build everything from scratch. In this example we will utilize Mantine components and hooks to create accessible color picker component.

ColorInput is a custom input built with Input and InputWrapper components.

import React, { useState, useRef } from 'react';
import { useId, useMergedRef, useClickOutside, useFocusTrap } from '@mantine/hooks';
import {
  useMantineTheme,
  InputWrapper,
  Input,
  InputProps,
  InputWrapperBaseProps,
  Transition,
  Paper,
  Group,
  ColorSwatch,
  Text,
} from '@mantine/core';


interface ColorInputProps
  extends InputProps,
    InputWrapperBaseProps,
    Omit<React.ComponentPropsWithoutRef<'button'>, 'value' | 'onChange'> {
  value: string;
  onChange(color: string): void;
  data: string[];
}


export function ColorInput({
  id,
  value,
  placeholder,
  onChange,
  data,
  required,
  description,
  label,
  error,
  ...others
}: ColorInputProps) {
  const theme = useMantineTheme();
  const uuid = useId(id);
  const controlRef = useRef<HTMLButtonElement>();
  const [dropdownOpened, setDropdownOpened] = useState(false);
  const focusTrapRef = useFocusTrap();
  const closeDropdown = () => setDropdownOpened(false);
  const clickOutsideRef = useClickOutside(closeDropdown);
  const dropdownRef = useMergedRef(focusTrapRef, clickOutsideRef);


  const handleChange = (color: string) => {
    onChange(color);
    closeDropdown();
  };


  const colors = data.map((color) => (
    <ColorSwatch
      style={{ cursor: 'pointer' }}
      key={color}
      component="button"
      color={color}
      onClick={() => handleChange(color)}
    />
  ));


  return (
    <InputWrapper
      required={required}
      id={uuid}
      label={label}
      error={error}
      description={description}
    >
      <div style={{ position: 'relative' }}>
        <Input
          component="button"
          id={uuid}
          onClick={() => setDropdownOpened(true)}
          styles={{ input: { cursor: 'pointer' } }}
          elementRef={controlRef}
          {...others}
        >
          {value ? (
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <ColorSwatch color={value} size={16} style={{ marginRight: 10 }} />
              <Text size="sm" transform="uppercase" style={{ lineHeight: 1 }}>
                {value}
              </Text>
            </div>
          ) : (
            <Text color="gray" size="sm">
              {placeholder}
            </Text>
          )}
        </Input>


        <Transition
          transition="skew-up"
          duration={250}
          mounted={dropdownOpened}
          // Wait for focus trap to unmount and focus control
          onExited={() => setTimeout(() => controlRef.current.focus(), 10)}
        >
          {(transitionStyles) => (
            <Paper
              shadow="md"
              padding="md"
              elementRef={dropdownRef}
              style={{
                ...transitionStyles,
                position: 'absolute',
                top: 0,
                left: 0,
                right: 0,
                border: `1px solid ${
                  theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[2]
                }`,
              }}
              onKeyDownCapture={(event) => {
                if (event.nativeEvent.code === 'Escape') {
                  closeDropdown();
                }
              }}
            >
              <Group position="center">{colors}</Group>
            </Paper>
          )}
        </Transition>
      </div>
    </InputWrapper>
  );
}

Input

For this input we will use Input as button, as we do not want to allow any free user input. We will also grab button ref for future focus management:

<Input
  component="button"
  onClick={() => setDropdownOpened(true)}
  inputStyle={{ cursor: 'pointer' }}
  elementRef={controlRef}
  {...others}
>
  {/*
    Since Input is rendered as a button
    we can use children to display current value or placeholder
  */}
  <div style={{ display: 'flex', alignItems: 'center' }}>
    <ColorSwatch color={value} size={20} style={{ marginRight: 10 }} />
    <Text size="sm" transform="uppercase">
      {value}
    </Text>
  </div>
</Input>

InputWrapper

To give ColorInput component the same label, description and error props as in other Mantine inputs, we will wrap it with InputWrapper and ensure that label is connected to input with use-id hook:

// if input receives id from props, this id will be used,
// otherwise random id will be generated
const uuid = useId(id);


// We just set InputWrapper props from ColorInput props
// It's not a rocket science as you see
<InputWrapper required={required} id={uuid} label={label} error={error} description={description}>
  <Input id={uuid} /* other input props */ />
</InputWrapper>;

Dropdown

Dropdown is built with Paper and ColorSwatch components.

// Colors generated from data prop
const colors = data.map((color) => (
  <ColorSwatch
    key={color}
    // make color swatch interactive, focus styles from theme are already applied
    component="button"
    color={color}
    onClick={() => handleChange(color)}
    style={{ cursor: 'pointer' }}
  />
));


const dropdown = (
  <Paper
    // predefined shadow and padding from theme.shadows and theme.spacing
    shadow="md"
    padding="md"
    // get element ref for focus trap and click outside
    elementRef={dropdownRef}
    // Close dropdown when user presses escape
    // since focus is trapped inside we do not need to pollute window with this event
    onKeyDownCapture={(event) => {
      if (event.nativeEvent.code === 'Escape') {
        closeDropdown();
      }
    }}
  >
    <Group position="center">{colors}</Group>
  </Paper>
);

Click outside and focus trap

When dropdown is opened usually it is a good idea to trap focus inside and close it with outside clicks. To implement this use use-click-outside and use-focus-trap. Both hooks return ref that should be passed to dropdown, to combine them use use-merged-ref hook:

const focusTrapRef = useFocusTrap();
const clickOutsideRef = useClickOutside(closeDropdown);
const dropdownRef = useMergedRef(focusTrapRef, clickOutsideRef);


// on dropdown component
<Paper elementRef={dropdownRef} /* ...other dropdown props */ />;

Animations

To animate dropdown presence we will use Transition component, it has some premade transitions, for this example skew-up will do the job:

<Transition
  transition="skew-up"
  duration={250}
  mounted={dropdownOpened}
  onExited={() => setTimeout(() => controlRef.current.focus(), 10)}
>
  {(transitionStyles) => <Paper style={transitionStyles} /* ...other dropdown props */ />}
</Transition>

When dropdownOpened is false, dropdown will not be mounted to the dom – focus trap will have no effect and click outside events will not be registered. When dropdown transition is finished we move focus back to control with onExit callback.

Build fully functional accessible web applications with ease
Project
Contribute to MantineChangelogReleases
Community
Join Discord communityFollow on TwitterEmail newsletterGithub discussions
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
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter