How to change inputs placeholder color?

Last updated January 17, 2024

All Mantine inputs can be divided in two groups:

Inputs that are based on <input /> HTML element (for example, TextInput). For these inputs use &:placeholder selector to change placeholder color.
Inputs that are based on <button /> HTML element (for example, DatePickerInput). For these inputs use Styles API to change placeholder color.

import { TextInput } from '@mantine/core';
import { DatePickerInput } from '@mantine/dates';
import classes from './Demo.module.css';

function Demo() {
  return (
    <>
      <TextInput
        placeholder="Text input with red placeholder"
        classNames={{ input: classes.textInput }}
      />
      <DatePickerInput
        placeholder="Date input with blue placeholder"
        mt="md"
        classNames={{ placeholder: classes.datePickerInputPlaceholder }}
      />
    </>
  );
}