Inputs@knitui/components

PillsInput

PillsInput is a multiline input shell that hosts a Pill.Group of pills alongside an editable PillsInput.Field. It inherits the full input chrome (label, description, error, left/right sections) from the shared InputWrapper + InputChrome. Pressing anywhere in the shell focuses the inner field. Accent follows the active Tamagui theme prop.

WebiOSAndroid8 style slots27 own props13 examples

Stories Source Tests Open in Storybook

import { PillsInput } from "@knitui/components";

Playground

Loading playground…

variantVisual variant — how the border and background are rendered.

sizeControls height metrics and font size.

label

description

error

disabled

false

Playground

<PillsInput
  label="Tags"
  description=""
  error=""
  disabled={false}
  size="sm"
  variant="default"
/>

Examples

Variants

Every visual variant side by side at the default size.

Loading example…

VariantsSource Storybook

Sizes

The full seven-step size scale, from xxs to xxl.

Loading example…

SizesSource Storybook

Shadows

Each elevation of the inherited shadow prop applied to the input shell.

Loading example…

ShadowsSource Storybook

Matrix

Variant × size matrix for visual regression across all combinations.

Loading example…

MatrixSource Storybook

With Label

With a label, description, and asterisk — full input wrapper chrome.

Loading example…

With LabelSource Storybook

With Error

Error state — displays an error message and applies error styling to the frame.

Loading example…

With ErrorSource Storybook

Loading

Loading state — a spinner stands in for a section; position via loadingPosition.

Loading example…

LoadingSource Storybook

Disabled

Disabled state — the shell and all child pills and the field are inert.

Loading example…

DisabledSource Storybook

With Sections

Left and right sections hold icons or adornments within the chrome frame.

Loading example…

With SectionsSource Storybook

Controlled

Controlled — the pill list is owned by the parent; type and press Enter to add.

Loading example…

ControlledSource Storybook

Styles

Per-slot styles targets individual parts — here the root frame, label and leftSection.

Loading example…

StylesSource Storybook

Hidden Field

Hidden field type — collapses the editable area for non-searchable select scenarios.

Loading example…

Hidden FieldSource Storybook

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Pills + a `PillsInput.Field`, usually inside a `Pill.Group`.
`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`	Disable the whole control (inherited by child `Pill`s + the field).
`error`	`ReactNode`
`errorProps`	`GetFinalProps<RNTamaguiTextNonStyleProps, TextStylePropsBase, { span?: boolean \| undefined; size?: string \| number \| undefined; inherit?: boolean \| undefined; lineClamp?: number \| undefined; truncate?: boolean \| "end" \| "start" \| undefined;…`	—
`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`	`Tags`
`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
`pointer`	`boolean \| undefined`	—	Render the field with a pointer cursor (non-searchable selects).
`radius` system	`string \| number \| undefined`	—	Key of theme radius or a valid CSS value to set border-radius
`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`	—	Extra ref to the bordered frame, merged with `ref`. Lets a wrapper (e.g. `Combobox.Target`) anchor/measure a dropdown against the visible field.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`size` system	`InputSize \| undefined` xxs · xs · sm · md · lg · xl · xxl	`sm`	Controls height metrics and font size.
`styles` system	`SlotStyles<InputWrapperSlots> \| undefined`	—	Uniform per-slot style passthrough — sugar over the composable parts. Slots: `wrapper` / `label` / `description` / `error` / `required`.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`variant` system	`InputVariant \| undefined` default · filled · unstyled	`"default"`	Visual variant — how the border and background are rendered.
`withAsterisk`	`boolean \| undefined`	—
`wrapperProps`	`Partial<GetFinalProps<RNTamaguiViewNonStyleProps, StackStyleBase, { radius?: string \| number \| undefined; size?: string \| number \| undefined; shadow?: "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined; disabled?: boolean \| undefi…`	—

Style slots

Every part of PillsInput can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`description`	`styles={{ description: { … } }}`
`error`	`styles={{ error: { … } }}`
`label`	`styles={{ label: { … } }}`
`leftSection`	`styles={{ leftSection: { … } }}`
`required`	`styles={{ required: { … } }}`
`rightSection`	`styles={{ rightSection: { … } }}`
`root`	`styles={{ root: { … } }}`
`wrapper`	`styles={{ wrapper: { … } }}`

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 496 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.