Colors

Colors is the most important part of the design system. It is used to create a visual hierarchy and to communicate meaning. We're creating a set of components to help you manage colors in your application.

Color Input

import {
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage
} from "@/components/ui/form";
import { ColorInput } from "@/components/color/color-input";
 
return (
  <FormField
    control={form.control}
    name="color"
    render={({ field }) => (
      <FormItem>
        <FormLabel>Color</FormLabel>
        <FormControl>
          <ColorInput {...field} />
        </FormControl>
        <FormMessage />
      </FormItem>
    )}
  />
);

Props

Name	Type	Default	Description
`disabled`	`bool`	`false`	If `true`, the input will be disabled
`disableRemoveColor`	`bool`	`false`	If `true`, the remove color button will be disabled

Icons Breadcrumbs