Placeholder Color

Atomic props for controlling the color of placeholder text.

Usage

Use placehoder{colorName} props to control the color of placeholder text.

Result

Loading...

Live Editor

<Box column gap2 bgGray100 p4> <Box as="input" placeholder="your email" placeholderGray500 p4 /> <Box as="input" placeholder="your email" placeholderGray500--L20 p4 /> <Box as="input" placeholder="your email" placeholderGray500--T60 p4 /> <Box as="input" placeholder="your email" placeholderGreen400 p4 /> <Box as="input" placeholder="your email" ring-2 placeholderTeal200 p4 /> <Box as="input" placeholder="your email" placeholderPink400--T60 p4 /> </Box>

<Box column gap2 bgGray100 p4>
  <Box as="input" placeholder="your email" placeholderGray500 p4 />
  <Box as="input" placeholder="your email" placeholderGray500--L20 p4 />
  <Box as="input" placeholder="your email" placeholderGray500--T60 p4 />
  <Box as="input" placeholder="your email" placeholderGreen400 p4 />
  <Box as="input" placeholder="your email" ring-2 placeholderTeal200 p4 />
  <Box as="input" placeholder="your email" placeholderPink400--T60 p4 />
</Box>