ColorInput

Color value input with picker bottom sheet

Import: import { ColorInput } from 'react-native-mantine';

Usage

import { ColorInput } from 'react-native-mantine';

<ColorInput
  label="Brand color"
  placeholder="#228be6"
  value={value}
  onChange={setValue}
  format="hex"
  swatches={['#fa5252', '#228be6', '#12b886']}
  closeOnColorSwatchClick
/>

// Picker only, no typing
<ColorInput disallowInput defaultValue="#be4bdb" />

Props

Prop	Type	Default	Description
`value`	`string`		Color value for controlled component
`defaultValue`	`string`		Default value for uncontrolled component
`onChange`	`(value: string) => void`		Called when the color changes
`onChangeEnd`	`(value: string) => void`		Called when the user stops interacting with the picker
`format`	`'hex' \| 'hexa' \| 'rgb' \| 'rgba' \| 'hsl' \| 'hsla'`	`"hex"`	Color format used by the picker and produced values
`withPicker`	`boolean`	`true`	Determines whether the color picker should be displayed in the dropdown
`withPreview`	`boolean`	`true`	Determines whether the current color preview swatch should be displayed on the left
`disallowInput`	`boolean`	`false`	Prevents typing, the dropdown opens when the input is pressed
`fixOnBlur`	`boolean`	`true`	Reverts to the last valid value on blur when the typed value is invalid
`swatches`	`string[]`		Predefined colors displayed as swatches in the dropdown
`swatchesPerRow`	`number`	`7`	Number of swatches per row
`closeOnColorSwatchClick`	`boolean`	`false`	Closes the dropdown when a swatch is pressed
`pickerButtonLabel`	`string`	`"Open color picker"`	Accessibility label of the button that opens the dropdown
`disabled`	`boolean`		Disables the input and the dropdown
`label`	`React.ReactNode`		Input label, inherited from TextInput
`description`	`React.ReactNode`		Input description, inherited from TextInput
`error`	`React.ReactNode`		Error message, inherited from TextInput

Source on GitHub · npm