ColorField

Color field displays a field that has a set of colors, which can be chosen.

Import

import { ColorField } from "@prismane/core";

Usage

function Demo() {
  const [color, setColor] = useState("");

  return (
    <ColorField
      placeholder="No color chosen"
      label="Choose a color:"
      value={color}
      onChange={(e) => setColor(e.target.value)}
    />
  );
}

Custom Set Of Colors

ColorField accepts a parameter of options, in which you can specify what color the field should offer as options. They can either be PrismaneColors or custom colors.

function Demo() {
  const [color, setColor] = useState("");

  return (
    <ColorField
      options={["teal", "#1e1e1e"]}
      placeholder="No color chosen"
      label="Custom color:"
      value={color}
      onChange={(e) => setColor(e.target.value)}
    />
  );
}

ColorField Variants

function Demo() {
  const [color, setColor] = useState("");

  return (
    <>
      <ColorField
        variant="outlined"
        placeholder="Outlined Field"
        label="Outlined Field:"
        value={color}
        onChange={(e) => setColor(e.target.value)}
      />
      <ColorField
        variant="filled"
        placeholder="Filled Field"
        label="Filled Field:"
        value={color}
        onChange={(e) => setColor(e.target.value)}
      />
      <ColorField
        variant="underlined"
        placeholder="Underlined Field"
        label="Underlined Field:"
        value={color}
        onChange={(e) => setColor(e.target.value)}
      />
      <ColorField
        variant="unstyled"
        placeholder="Unstyled Field"
        label="Unstyled Field:"
        value={color}
        onChange={(e) => setColor(e.target.value)}
      />
    </>
  );
}

ColorField Sizes

function Demo() {
  const [color, setColor] = useState("");

  return (
    <Flex direction="column" gap={fr(2)}>
      <ColorField
        size="xs"
        placeholder="xs Size"
        label="xs Size:"
        value={color}
        onChange={(e) => setColor(e.target.value)}
      />
      <ColorField
        size="sm"
        placeholder="sm Size"
        label="sm Size:"
        value={color}
        onChange={(e) => setColor(e.target.value)}
      />
      <ColorField
        size="base"
        placeholder="base Size"
        label="base Size:"
        value={color}
        onChange={(e) => setColor(e.target.value)}
      />
      <ColorField
        size="md"
        placeholder="md Size"
        label="md Size:"
        value={color}
        onChange={(e) => setColor(e.target.value)}
      />
      <ColorField
        size="lg"
        placeholder="lg Size"
        label="lg Size:"
        value={color}
        onChange={(e) => setColor(e.target.value)}
      />
    </Flex>
  );
}

API

Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.

- ColorField

Go BackCollapse

Up NextContainer