Color Input

Styled wrapper around a native color input, for a consistent color picker across browsers.

Overview

<ColorInput> wraps <input type="color"> with the .form-input class, giving a consistently sized and rounded color swatch with no additional markup required.

Color picker

import { ColorInput, FormLabel } from '@chassis-ui/react'

export const Example = () => {
  return (
    <>
      <FormLabel htmlFor="exampleColorInput">Color picker</FormLabel>
      <ColorInput id="exampleColorInput" defaultValue="#0d6efd" />
    </>
  )
}

Disabled

Add the disabled boolean attribute to give the input a grayed-out appearance and remove pointer events.

Disabled color picker

import { ColorInput, FormLabel } from '@chassis-ui/react'

export const Example = () => {
  return (
    <>
      <FormLabel htmlFor="exampleColorInputDisabled">Disabled color picker</FormLabel>
      <ColorInput id="exampleColorInputDisabled" defaultValue="#0d6efd" disabled />
    </>
  )
}

As a form field

Use label/help/invalidFeedback/validFeedback directly on <ColorInput> to wrap it in a .form-field with an associated label and help text.

Accent color

Used for links and primary buttons.

import { ColorInput } from '@chassis-ui/react'

export const Example = () => {
  return (
    <ColorInput
      label="Accent color"
      help="Used for links and primary buttons."
      defaultValue="#0d6efd"
      id="accentColor"
    />
  )
}

Sizing

Set size to "sm" or "lg" to change the size of the color swatch.

Small color inputLarge color input

import { ColorInput, FormLabel } from '@chassis-ui/react'

export const Example = () => {
  return (
    <>
      <FormLabel htmlFor="colorInputSm">Small color input</FormLabel>
      <ColorInput id="colorInputSm" size="sm" className="mb-md" />
      <FormLabel htmlFor="colorInputLg">Large color input</FormLabel>
      <ColorInput id="colorInputLg" size="lg" />
    </>
  )
}

API

ColorInput

Prop	Type	Default
`className?`	`string`	—
A string of all className you want applied to the component.
`defaultValue?`	`string`	—
The value of the input, uncontrolled.
`disabled?`	`boolean`	—
Toggle the disabled state for the component.
`help?`	`ReactNode`	—
A description for the field, rendered below the input.
`invalid?`	`boolean`	—
Set component validation state to invalid.
`invalidFeedback?`	`ReactNode`	—
An error message for the field, rendered below the input when `invalid` is set.
`label?`	`ReactNode`	—
The field's caption, rendered as a `FormLabel` associated with this input.
`onChange?`	`ChangeEventHandler<HTMLInputElement>`	—
Method called immediately after the `value` prop changes.
`size?`	`"sm" \| "lg"`	—
Size the component sm or lg.
`valid?`	`boolean`	—
Set component validation state to valid.
`validFeedback?`	`ReactNode`	—
A success message for the field, rendered below the input when `valid` is set.
`value?`	`string`	—
The `value` attribute of component. @controllable onChange