Inputs@knitui/components
ColorInput
ColorInput combines an InputBase with a Popover-hosted ColorPicker dropdown. Typing a valid color updates the preview swatch in the left section; the picker drives the value back. The withPicker, swatches, disallowInput and format props control what appears in the dropdown.
WebiOSAndroid13 style slots71 own props12 examples
import { ColorInput } from "@knitui/components";Playground
Loading playground…
true
true
false
true
false
false
<ColorInput
placeholder="Pick a color"
size="sm"
withPicker
withPreview
disallowInput={false}
fixOnBlur
closeOnColorSwatchClick={false}
disabled={false}
format="hex"
/>Examples
Sizes
The five sizes rendered side by side for quick visual comparison.
Loading example…
Shadows
The inherited shadow elevation ladder, from xs to xl.
Loading example…
Disabled
Disabled state — the field is non-interactive and visually muted.
Loading example…
Disallow Input
Input is read-only; the value can only be changed via the picker dropdown.
Loading example…
Read Only
Read-only — the value is visible but locked; the picker dropdown does not open.
Loading example…
With Swatches
Predefined swatches appear below the picker for quick selection.
Loading example…
Swatches Only
Swatches-only dropdown — the gradient/slider picker is hidden.
Loading example…
Rgba Format
Outputs RGBA strings instead of the default hex format.
Loading example…
Controlled
Fully controlled — value and onChange are wired through local state.
Loading example…
With Field Props
With a label, description and error message — standard field anatomy.
Loading example…
Styles
Per-slot styles targets individual parts — here the label chrome and the preview swatch.
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
autoCapitalize | "none" | (string & {}) | "off" | "on" | "sentences" | "words" | "characters" | undefined | — | — |
autoComplete | string | undefined | — | — |
autoCorrect | string | boolean | undefined | — | — |
autoFocus | boolean | undefined | — | — |
autosize | boolean | undefined | false | Grows with content on web (scrollHeight-based); tracks onContentSizeChange on native. |
children | ReactNode | — | Rendered inside the host element. Only meaningful for the `button` host (e.g. FileInput's trigger displays the picked file name); ignored for the native `input`/`textarea`/`select` hosts. |
closeOnColorSwatchClick | boolean | undefined | false | Close the dropdown when a predefined swatch is clicked. |
component | InputHostTag | undefined | — | Override the host element tag (defaults to `input`/`textarea`). |
defaultValue | string | undefined | '' | Uncontrolled initial value. |
description | ReactNode | — | — |
descriptionProps | GetFinalProps<RNTamaguiTextNonStyleProps, TextStylePropsBase, { span?: boolean | undefined; size?: string | number | undefined; inherit?: boolean | undefined; lineClamp?: number | undefined; truncate?: boolean | "end" | "start" | undefined;… | — | — |
disabled system | boolean | undefined | false | — |
disallowInput | boolean | undefined | false | Forbid typing — value can only be chosen via the picker. |
enterKeyHint | "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined | — | — |
error | ReactNode | — | — |
errorProps | GetFinalProps<RNTamaguiTextNonStyleProps, TextStylePropsBase, { span?: boolean | undefined; size?: string | number | undefined; inherit?: boolean | undefined; lineClamp?: number | undefined; truncate?: boolean | "end" | "start" | undefined;… | — | — |
eyeDropperIcon | ReactNode | — | Custom eye-dropper icon (unused — see `withEyeDropper`). |
fixOnBlur | boolean | undefined | true | Reset to last valid value on blur when the field contains an invalid color. |
format | ColorFormat | undefinedhex · hexa · rgb · rgba · hsl · hsla · hsv · hsva | 'hex' | Output color format for onChange / onChangeEnd. |
id | string | undefined | — | Same as the web id property for setting a uid on an element |
inputContainer | ((children: ReactNode) => ReactNode) | undefined | — | — |
inputSize | string | undefined | — | Host size attribute for the input element |
inputWrapperOrder | InputWrapperOrderItem[] | undefined | — | — |
label | ReactNode | — | — |
labelElement | "div" | "label" | undefined | — | — |
labelProps | InputLabelProps | undefined | — | — |
leftSection | ReactNode | — | Content section displayed on the left side of the input |
leftSectionPointerEvents | InputSectionPointerEvents | undefined | "none" | Sets pointer-events styles on the left section element |
leftSectionProps | Partial<GetFinalProps<RNTamaguiViewNonStyleProps, StackStyleBase, { shadow?: "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | undefined; sectionPointerEvents?: "none" | "all" | undefined; }>> | undefined | — | Props passed down to the left section element |
leftSectionWidth | number | Animated.AnimatedNode | GetThemeValueForKey<"width"> | null | undefined | — | Left section width, by default equals to the input height |
loading | boolean | undefined | — | Displays loading indicator in the left or right section |
loadingPosition | "left" | "right" | undefined | "right" | Position of the loading indicator |
max | string | number | undefined | — | — |
maxLength | number | undefined | — | — |
maxRows | number | undefined | — | Maximum number of rows before scrolling (web). Caps height on native when autosize is on. |
min | string | number | undefined | — | — |
minLength | number | undefined | — | — |
minRows | number | undefined | — | Minimum number of rows. Sets initial/minimum height on web; maps to numberOfLines on native. |
multiline | boolean | undefined | — | Adjusts padding and sizing calculations for multiline inputs |
multiple | boolean | undefined | — | — |
name | string | undefined | — | — |
onChange | ((value: string) => void) | undefined | — | Called on every value change (typing, dragging, swatch click). |
onChangeEnd | ((value: string) => void) | undefined | — | Called once a picker drag / keyboard change finishes. |
onChangeText | ((text: string) => void) | undefined | — | Fires on every change with just the string value. |
onSelectionChange | ((event: InputSelectionChangePayload) => void) | undefined | — | Fires when the text selection changes. |
onSubmitEditing | ((event: InputTextEventPayload) => void) | undefined | — | Fires when Enter/Return is pressed. |
pattern | string | undefined | — | — |
placeholder | string | undefined | Pick a color | — |
pointer | boolean | undefined | — | Determines whether the input should have cursor: pointer style |
popoverProps | Partial<PopoverProps> | undefined | — | — |
radius system | string | number | undefined | — | Key of theme radius or a valid CSS value to set border-radius |
readOnly | boolean | undefined | — | — |
required | boolean | undefined | — | — |
rightSection | ReactNode | — | Content section displayed on the right side of the input |
rightSectionPointerEvents | InputSectionPointerEvents | undefined | "none" | Sets pointer-events styles on the right section element |
rightSectionProps | Partial<GetFinalProps<RNTamaguiViewNonStyleProps, StackStyleBase, { shadow?: "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | undefined; sectionPointerEvents?: "none" | "all" | undefined; }>> | undefined | — | Props passed down to the right section element |
rightSectionWidth | number | Animated.AnimatedNode | GetThemeValueForKey<"width"> | null | undefined | — | Right section width, by default equals to the input height |
rootRef | Ref<TamaguiElement> | undefined | — | Root element ref |
rows | number | undefined | — | Rows for textarea (when render="textarea") |
selection | { start: number; end?: number; } | undefined | — | Selection range |
shadow system | "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | undefined | — | — |
size system | InputSize | undefinedxxs · xs · sm · md · lg · xl · xxl | sm | Controls height, horizontal padding, radius and font size. |
spellCheck | boolean | undefined | — | Controls spell checking. |
step | string | number | undefined | — | — |
styles system | SlotStyles<ColorInputStyles> | undefined | — | Per-slot style sugar — props spread onto the matching part. |
swatches | string[] | undefined | — | Predefined swatches shown in the dropdown. |
swatchesPerRow | number | undefined | 7 | Swatches per row in the dropdown. |
textContentType | InputTextContentType | undefined | — | Text content type for iOS autofill. Use `autoComplete` where available. |
theme system | ThemeName | null | undefined | — | Applies a theme to this element |
type | string | undefined | — | — |
value | string | undefined | — | Controlled value. |
variant system | InputVariant | undefined | "default" | Visual variant |
withAria | boolean | undefined | true | Determines whether accessibility attributes should be added |
withAsterisk | boolean | undefined | — | — |
withEyeDropper | boolean | undefined | false | Accepted for Mantine API parity. The browser `EyeDropper` API has no cross-platform equivalent, so this is a documented no-op. |
withPicker | boolean | undefined | true | Render the saturation + slider picker in the dropdown. |
withPreview | boolean | undefined | true | Show the current color as a swatch in the left section. |
wrapperProps | ({ readonly br?: number | "$xs" | "$sm" | "$md" | "$lg" | "$xl" | "unset" | "$0" | "$true" | "$xxs" | "$xxl" | Variable<any> | `${number}rem` | UnionableNumber | "inherit" | `var(${string})` | Animated.AnimatedNode | null | undefined; label… | — | Props passed down to the root element (`Input.Wrapper` component) |
Style slots
Every part of ColorInput can be styled through the styles prop. Explicit props on the component always win over slot styles.
| Slot | Targets |
|---|---|
description | The Input.Description. |
dropdown | Props for the floating dropdown surface (Popover.Dropdown). |
error | The Input.Error. |
eyedropper | Props for the eyedropper affordance. The browser EyeDropper API has no cross-platform equivalent, so the eyedropper is a documented no-op and this slot is reserved for API parity / forward-compat only — it currently targets nothing rendered. |
label | The Input.Label. |
leftSection | The left adornment section (InputSectionFrame). Applied by InputChrome. The deprecated leftSectionProps alias merges OVER this. |
picker | Props forwarded to the dropdown ColorPicker. |
preview | Props for the left-section preview swatch (withPreview). |
required | The required asterisk Text inside the label. |
rightSection | The right adornment section (InputSectionFrame). Applied by InputChrome. The deprecated rightSectionProps alias merges OVER this. |
root | The input frame/container (InputRootFrame) that InputChrome lays the control and its left/right sections out in. Applied by Input/InputChrome, not by Input.Wrapper. The deprecated wrapperProps alias merges OVER this. |
swatch | Per-slot styles reaching each predefined swatch in the dropdown picker. |
wrapper | The outer InputWrapperFrame column. |
Accessibility & DOM props (218)
| Prop | Type |
|---|---|
about | string | undefined |
accept | string | undefined |
accessKey | string | undefined |
alt | string | undefined |
aria-activedescendant | string | undefined |
aria-atomic | (boolean | "true" | "false") | undefined |
aria-autocomplete | "none" | "inline" | "list" | "both" | undefined |
aria-braillelabel | string | undefined |
aria-brailleroledescription | string | undefined |
aria-colcount | number | undefined |
aria-colindex | number | undefined |
aria-colindextext | string | undefined |
aria-colspan | number | undefined |
aria-controls | string | undefined |
aria-current | boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined |
aria-describedby | string | undefined |
aria-description | string | undefined |
aria-details | string | undefined |
aria-dropeffect | "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined |
aria-errormessage | string | undefined |
aria-flowto | string | undefined |
aria-grabbed | (boolean | "true" | "false") | undefined |
aria-haspopup | boolean | "dialog" | "menu" | "true" | "false" | "grid" | "tree" | "listbox" | undefined |
aria-invalid | boolean | "true" | "false" | "grammar" | "spelling" | undefined |
aria-keyshortcuts | string | undefined |
aria-level | number | undefined |
aria-multiline | (boolean | "true" | "false") | undefined |
aria-multiselectable | (boolean | "true" | "false") | undefined |
aria-orientation | "horizontal" | "vertical" | undefined |
aria-owns | string | undefined |
aria-placeholder | string | undefined |
aria-posinset | number | undefined |
aria-pressed | boolean | "true" | "false" | "mixed" | undefined |
aria-readonly | (boolean | "true" | "false") | undefined |
aria-relevant | "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined |
aria-required | (boolean | "true" | "false") | undefined |
aria-roledescription | string | undefined |
aria-rowcount | number | undefined |
aria-rowindex | number | undefined |
aria-rowindextext | string | undefined |
aria-rowspan | number | undefined |
aria-setsize | number | undefined |
aria-sort | "none" | "ascending" | "descending" | "other" | undefined |
autoSave | string | undefined |
capture | boolean | "user" | "environment" | undefined |
checked | boolean | undefined |
contentEditable | "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined |
contextMenu | string | undefined |
datatype | string | undefined |
defaultChecked | boolean | undefined |
dir | string | undefined |
draggable | (boolean | "true" | "false") | undefined |
exportparts | string | undefined |
form | string | undefined |
formAction | string | ((formData: FormData) => void | Promise<void>) | undefined |
formEncType | string | undefined |
formMethod | string | undefined |
formNoValidate | boolean | undefined |
formTarget | string | undefined |
hidden | boolean | undefined |
inert | boolean | undefined |
inlist | any |
inputMode | "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined |
is | string | undefined |
itemID | string | undefined |
itemProp | string | undefined |
itemRef | string | undefined |
itemScope | boolean | undefined |
itemType | string | undefined |
key | Key | null | undefined |
lang | string | undefined |
list | string | undefined |
nonce | string | undefined |
onAbort | ReactEventHandler<HTMLInputElement> | undefined |
onAbortCapture | ReactEventHandler<HTMLInputElement> | undefined |
onAnimationEnd | AnimationEventHandler<HTMLInputElement> | undefined |
onAnimationEndCapture | AnimationEventHandler<HTMLInputElement> | undefined |
onAnimationIteration | AnimationEventHandler<HTMLInputElement> | undefined |
onAnimationIterationCapture | AnimationEventHandler<HTMLInputElement> | undefined |
onAnimationStart | AnimationEventHandler<HTMLInputElement> | undefined |
onAnimationStartCapture | AnimationEventHandler<HTMLInputElement> | undefined |
onAuxClick | MouseEventHandler<HTMLInputElement> | undefined |
onAuxClickCapture | MouseEventHandler<HTMLInputElement> | undefined |
onBeforeInputCapture | InputEventHandler<HTMLInputElement> | undefined |
onBeforeToggle | ToggleEventHandler<HTMLInputElement> | undefined |
onBlurCapture | FocusEventHandler<HTMLInputElement> | undefined |
onCanPlay | ReactEventHandler<HTMLInputElement> | undefined |
onCanPlayCapture | ReactEventHandler<HTMLInputElement> | undefined |
onCanPlayThrough | ReactEventHandler<HTMLInputElement> | undefined |
onCanPlayThroughCapture | ReactEventHandler<HTMLInputElement> | undefined |
onChangeCapture | ChangeEventHandler<HTMLInputElement, Element> | undefined |
onClickCapture | MouseEventHandler<HTMLInputElement> | undefined |
onCompositionEnd | CompositionEventHandler<HTMLInputElement> | undefined |
onCompositionEndCapture | CompositionEventHandler<HTMLInputElement> | undefined |
onCompositionStart | CompositionEventHandler<HTMLInputElement> | undefined |
onCompositionStartCapture | CompositionEventHandler<HTMLInputElement> | undefined |
onCompositionUpdate | CompositionEventHandler<HTMLInputElement> | undefined |
onCompositionUpdateCapture | CompositionEventHandler<HTMLInputElement> | undefined |
onContextMenuCapture | MouseEventHandler<HTMLInputElement> | undefined |
onCopyCapture | ClipboardEventHandler<HTMLInputElement> | undefined |
onCutCapture | ClipboardEventHandler<HTMLInputElement> | undefined |
onDoubleClickCapture | MouseEventHandler<HTMLInputElement> | undefined |
onDragCapture | DragEventHandler<HTMLInputElement> | undefined |
onDragEndCapture | DragEventHandler<HTMLInputElement> | undefined |
onDragEnterCapture | DragEventHandler<HTMLInputElement> | undefined |
onDragExit | DragEventHandler<HTMLInputElement> | undefined |
onDragExitCapture | DragEventHandler<HTMLInputElement> | undefined |
onDragLeaveCapture | DragEventHandler<HTMLInputElement> | undefined |
onDragOverCapture | DragEventHandler<HTMLInputElement> | undefined |
onDragStartCapture | DragEventHandler<HTMLInputElement> | undefined |
onDropCapture | DragEventHandler<HTMLInputElement> | undefined |
onDurationChange | ReactEventHandler<HTMLInputElement> | undefined |
onDurationChangeCapture | ReactEventHandler<HTMLInputElement> | undefined |
onEmptied | ReactEventHandler<HTMLInputElement> | undefined |
onEmptiedCapture | ReactEventHandler<HTMLInputElement> | undefined |
onEncrypted | ReactEventHandler<HTMLInputElement> | undefined |
onEncryptedCapture | ReactEventHandler<HTMLInputElement> | undefined |
onEnded | ReactEventHandler<HTMLInputElement> | undefined |
onEndedCapture | ReactEventHandler<HTMLInputElement> | undefined |
onError | ReactEventHandler<HTMLInputElement> | undefined |
onErrorCapture | ReactEventHandler<HTMLInputElement> | undefined |
onFocusCapture | FocusEventHandler<HTMLInputElement> | undefined |
onGotPointerCapture | PointerEventHandler<HTMLInputElement> | undefined |
onGotPointerCaptureCapture | PointerEventHandler<HTMLInputElement> | undefined |
onInputCapture | InputEventHandler<HTMLInputElement> | undefined |
onInvalid | ReactEventHandler<HTMLInputElement> | undefined |
onInvalidCapture | ReactEventHandler<HTMLInputElement> | undefined |
onKeyDownCapture | KeyboardEventHandler<HTMLInputElement> | undefined |
onKeyPress | KeyboardEventHandler<HTMLInputElement> | undefined |
onKeyPressCapture | KeyboardEventHandler<HTMLInputElement> | undefined |
onKeyUpCapture | KeyboardEventHandler<HTMLInputElement> | undefined |
onLoad | ReactEventHandler<HTMLInputElement> | undefined |
onLoadCapture | ReactEventHandler<HTMLInputElement> | undefined |
onLoadedData | ReactEventHandler<HTMLInputElement> | undefined |
onLoadedDataCapture | ReactEventHandler<HTMLInputElement> | undefined |
onLoadedMetadata | ReactEventHandler<HTMLInputElement> | undefined |
onLoadedMetadataCapture | ReactEventHandler<HTMLInputElement> | undefined |
onLoadStart | ReactEventHandler<HTMLInputElement> | undefined |
onLoadStartCapture | ReactEventHandler<HTMLInputElement> | undefined |
onLostPointerCapture | PointerEventHandler<HTMLInputElement> | undefined |
onLostPointerCaptureCapture | PointerEventHandler<HTMLInputElement> | undefined |
onMouseDownCapture | MouseEventHandler<HTMLInputElement> | undefined |
onMouseMoveCapture | MouseEventHandler<HTMLInputElement> | undefined |
onMouseOutCapture | MouseEventHandler<HTMLInputElement> | undefined |
onMouseOverCapture | MouseEventHandler<HTMLInputElement> | undefined |
onMouseUpCapture | MouseEventHandler<HTMLInputElement> | undefined |
onPasteCapture | ClipboardEventHandler<HTMLInputElement> | undefined |
onPause | ReactEventHandler<HTMLInputElement> | undefined |
onPauseCapture | ReactEventHandler<HTMLInputElement> | undefined |
onPlay | ReactEventHandler<HTMLInputElement> | undefined |
onPlayCapture | ReactEventHandler<HTMLInputElement> | undefined |
onPlaying | ReactEventHandler<HTMLInputElement> | undefined |
onPlayingCapture | ReactEventHandler<HTMLInputElement> | undefined |
onPointerOut | PointerEventHandler<HTMLInputElement> | undefined |
onPointerOutCapture | PointerEventHandler<HTMLInputElement> | undefined |
onPointerOver | PointerEventHandler<HTMLInputElement> | undefined |
onPointerOverCapture | PointerEventHandler<HTMLInputElement> | undefined |
onProgress | ReactEventHandler<HTMLInputElement> | undefined |
onProgressCapture | ReactEventHandler<HTMLInputElement> | undefined |
onRateChange | ReactEventHandler<HTMLInputElement> | undefined |
onRateChangeCapture | ReactEventHandler<HTMLInputElement> | undefined |
onReset | ReactEventHandler<HTMLInputElement> | undefined |
onResetCapture | ReactEventHandler<HTMLInputElement> | undefined |
onScrollCapture | UIEventHandler<HTMLInputElement> | undefined |
onScrollEnd | UIEventHandler<HTMLInputElement> | undefined |
onScrollEndCapture | UIEventHandler<HTMLInputElement> | undefined |
onSeeked | ReactEventHandler<HTMLInputElement> | undefined |
onSeekedCapture | ReactEventHandler<HTMLInputElement> | undefined |
onSeeking | ReactEventHandler<HTMLInputElement> | undefined |
onSeekingCapture | ReactEventHandler<HTMLInputElement> | undefined |
onSelect | ReactEventHandler<HTMLInputElement> | undefined |
onSelectCapture | ReactEventHandler<HTMLInputElement> | undefined |
onStalled | ReactEventHandler<HTMLInputElement> | undefined |
onStalledCapture | ReactEventHandler<HTMLInputElement> | undefined |
onSubmit | SubmitEventHandler<HTMLInputElement> | undefined |
onSubmitCapture | SubmitEventHandler<HTMLInputElement> | undefined |
onSuspend | ReactEventHandler<HTMLInputElement> | undefined |
onSuspendCapture | ReactEventHandler<HTMLInputElement> | undefined |
onTimeUpdate | ReactEventHandler<HTMLInputElement> | undefined |
onTimeUpdateCapture | ReactEventHandler<HTMLInputElement> | undefined |
onToggle | ToggleEventHandler<HTMLInputElement> | undefined |
onTouchCancelCapture | TouchEventHandler<HTMLInputElement> | undefined |
onTouchMoveCapture | TouchEventHandler<HTMLInputElement> | undefined |
onTouchStartCapture | TouchEventHandler<HTMLInputElement> | undefined |
onTransitionCancel | TransitionEventHandler<HTMLInputElement> | undefined |
onTransitionCancelCapture | TransitionEventHandler<HTMLInputElement> | undefined |
onTransitionEnd | TransitionEventHandler<HTMLInputElement> | undefined |
onTransitionEndCapture | TransitionEventHandler<HTMLInputElement> | undefined |
onTransitionRun | TransitionEventHandler<HTMLInputElement> | undefined |
onTransitionRunCapture | TransitionEventHandler<HTMLInputElement> | undefined |
onTransitionStart | TransitionEventHandler<HTMLInputElement> | undefined |
onTransitionStartCapture | TransitionEventHandler<HTMLInputElement> | undefined |
onVolumeChange | ReactEventHandler<HTMLInputElement> | undefined |
onVolumeChangeCapture | ReactEventHandler<HTMLInputElement> | undefined |
onWaiting | ReactEventHandler<HTMLInputElement> | undefined |
onWaitingCapture | ReactEventHandler<HTMLInputElement> | undefined |
onWheelCapture | WheelEventHandler<HTMLInputElement> | undefined |
part | string | undefined |
popover | "" | "auto" | "manual" | "hint" | undefined |
popoverTarget | string | undefined |
popoverTargetAction | "hide" | "show" | "toggle" | undefined |
prefix | string | undefined |
property | string | undefined |
radioGroup | string | undefined |
ref | Ref<(HTMLElement & TamaguiElementMethods) | View> | undefined |
resource | string | undefined |
results | number | undefined |
rev | string | undefined |
security | string | undefined |
slot | string | undefined |
src | string | undefined |
suppressContentEditableWarning | boolean | undefined |
suppressHydrationWarning | boolean | undefined |
title | string | undefined |
translate | "yes" | "no" | undefined |
typeof | string | undefined |
unselectable | "off" | "on" | undefined |
vocab | string | undefined |
Plus 503 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.