(null)
}
export {
Combobox,
ComboboxChip,
ComboboxChips,
ComboboxChipsInput,
ComboboxCollection,
ComboboxContent,
ComboboxEmpty,
ComboboxGroup,
ComboboxInput,
ComboboxItem,
ComboboxLabel,
ComboboxList,
ComboboxSeparator,
ComboboxTrigger,
ComboboxValue,
useComboboxAnchor,
}
```
4. Update the import paths to match your project.
## Usage
```tsx
import { ComboboxValue, ComboboxTrigger, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxEmpty, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipsInput } from "@/components/ui/combobox"
```
```tsx
No framework found.
{(item: string) => (
{item}
)}
```
Pass `items` to the root and a function as the child of `ComboboxList`, which receives each item and returns a `ComboboxItem` with a matching `value`. The value is uncontrolled with `defaultValue`, or controlled with `value` and `onValueChange`. To read or control the typed text, use `inputValue` and `onInputValueChange`.
For grouped data, pass groups as `items`, render a `ComboboxGroup` with its own `items` for each one, and render its items with `ComboboxCollection`. For multiple selection, set `multiple` on the root, create a ref with `useComboboxAnchor`, attach it to `ComboboxChips`, and pass it as `anchor` to `ComboboxContent` so the popup aligns to the chips field. Use `ComboboxValue` with a render function to map the selected values to chips.
## Examples
### With clear button
A combobox with a starting value and a clear button, enabled with `showClear`.
**Example**
```tsx
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from "@/components/ui/combobox"
const frameworks = ["Next.js", "Remix", "Astro", "SvelteKit", "Nuxt", "Gatsby"]
export default function ComboboxWithClearButton() {
return (
No framework found.
{(item: string) => (
{item}
)}
)
}
```
### Disabled
A disabled combobox whose input and toggle button cannot be focused or used.
**Example**
```tsx
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from "@/components/ui/combobox"
const frameworks = ["Next.js", "Remix", "Astro", "SvelteKit", "Nuxt", "Gatsby"]
export default function ComboboxDisabled() {
return (
No framework found.
{(item: string) => (
{item}
)}
)
}
```
### Grouped
Options grouped by region with labels and separators between groups.
**Example**
```tsx
import {
Combobox,
ComboboxCollection,
ComboboxContent,
ComboboxEmpty,
ComboboxGroup,
ComboboxInput,
ComboboxItem,
ComboboxLabel,
ComboboxList,
ComboboxSeparator,
} from "@/components/ui/combobox"
const timezones = [
{
value: "Americas",
items: ["New York", "Chicago", "Los Angeles", "São Paulo"],
},
{
value: "Europe",
items: ["London", "Berlin", "Istanbul", "Madrid"],
},
{
value: "Asia",
items: ["Tokyo", "Singapore", "Dubai"],
},
]
export default function ComboboxGrouped() {
return (
No city found.
{(group: (typeof timezones)[number], index: number) => (
{index > 0 && {group.value}
{(item: string) => (
{item}
)}
)}
)
}
```
### Highlight match
A controlled `inputValue` used to emphasize the matching part of each option.
**Example**
```tsx
import * as React from "react"
import {
Combobox,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxList,
} from "@/components/ui/combobox"
const frameworks = ["Next.js", "Remix", "Astro", "SvelteKit", "Nuxt", "Gatsby"]
function HighlightedMatch({ text, query }: { text: string; query: string }) {
const start = query ? text.toLowerCase().indexOf(query.toLowerCase()) : -1
if (start < 0) return text
return (
{text.slice(0, start)}
{text.slice(start, start + query.length)}
{text.slice(start + query.length)}
)
}
function HighlightMatchCombobox() {
const [query, setQuery] = React.useState("")
return (
No framework found.
{(item: string) => (
)}
)
}
export default function ComboboxHighlightMatch() {
return (
)
}
```
### Multiple
Multiple selection shown as removable chips, with Backspace removing the last chip.
**Example**
```tsx
import {
Combobox,
ComboboxChip,
ComboboxChips,
ComboboxChipsInput,
ComboboxContent,
ComboboxEmpty,
ComboboxItem,
ComboboxList,
ComboboxValue,
useComboboxAnchor,
} from "@/components/ui/combobox"
const frameworks = ["Next.js", "Remix", "Astro", "SvelteKit", "Nuxt", "Gatsby"]
function MultipleCombobox({ disabled }: { disabled?: boolean }) {
const anchor = useComboboxAnchor()
return (
{(values: string[]) => (
<>
{values.map((value) => (
{value}
))}
No framework found.
{(item: string) => (
{item}
)}
)
}
export default function ComboboxMultiple() {
return (
)
}
```
## API Reference
- `Combobox`
- `ComboboxInput`
- `ComboboxContent`
- `ComboboxEmpty`
- `ComboboxList`
- `ComboboxItem`
- `ComboboxGroup`
- `ComboboxSeparator`
- `ComboboxLabel`
- `ComboboxCollection`
- `ComboboxItem`
### Combobox
The root that holds the items, the selected value and the open state.
Also accepts the props of `ComboboxPrimitive.Root`.
### ComboboxValue
Renders the current value, or passes it to a render function, for example to draw chips.
Also accepts the props of `ComboboxPrimitive.Value.Props`.
### ComboboxTrigger
A button that opens the list, with a caret icon.
Also accepts the props of `ComboboxPrimitive.Trigger.Props`.
### ComboboxInput
The text field, rendered inside an `InputGroup` with optional open and clear buttons.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `showTrigger` | `boolean` | `true` | Shows the button at the end of the field that opens the list. |
| `showClear` | `boolean` | `false` | Shows a clear button at the end of the field. When shown, it hides the open button. |
Also accepts the props of `ComboboxPrimitive.Input.Props`.
### ComboboxContent
The popup, rendered in a portal and positioned below the input.
Also accepts the props of `ComboboxPrimitive.Popup.Props`, `ComboboxPrimitive.Positioner.Props`.
### ComboboxList
The scrollable list that renders items through a render function.
Also accepts the props of `ComboboxPrimitive.List.Props`.
### ComboboxItem
A selectable option that shows a check mark when selected.
Also accepts the props of `ComboboxPrimitive.Item.Props`.
### ComboboxGroup
Groups related options and takes its own `items`.
Also accepts the props of `ComboboxPrimitive.Group.Props`.
### ComboboxLabel
The visible label of a group.
Also accepts the props of `ComboboxPrimitive.GroupLabel.Props`.
### ComboboxCollection
Renders the items of a group through a render function.
Also accepts the props of `ComboboxPrimitive.Collection.Props`.
### ComboboxEmpty
Content shown when no options match the typed text.
Also accepts the props of `ComboboxPrimitive.Empty.Props`.
### ComboboxSeparator
A divider between groups.
Also accepts the props of `ComboboxPrimitive.Separator.Props`.
### ComboboxChips
The field that holds selected values as chips in multiple selection.
Also accepts the props of `React.ComponentPropsWithRef`, `ComboboxPrimitive.Chips.Props`.
### ComboboxChip
A selected value shown as a chip, with an optional remove button.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `showRemove` | `boolean` | `true` | Shows a button inside the chip that removes the value. |
| `removeLabel` | `string` | `Remove {value}` | Accessible name of the remove button. Defaults to `Remove` followed by the chip text. |
Also accepts the props of `ComboboxPrimitive.Chip.Props`.
### ComboboxChipsInput
The text field placed after the chips in multiple selection.
Also accepts the props of `ComboboxPrimitive.Input.Props`.
## Accessibility
- The input has the `combobox` role and sets `aria-expanded` to reflect whether the list is open.
- The popup has the `listbox` role, options have the `option` role and selected options set `aria-selected`; groups have the `group` role and take their name from `ComboboxLabel`.
- Typing filters the options. Arrow keys move the highlight, Enter selects the highlighted option, and Escape closes the list.
- In multiple selection, Backspace in the empty input removes the last chip.
- The open button is labelled `Show options` and the clear button is labelled `Clear`.
- When disabled, the input and the open button are disabled and removed from the Tab order.
- Give the input an accessible name with a visible label or `aria-label`.
## Notes
- Styling hooks: `data-slot` values such as `combobox-content`, `combobox-list`, `combobox-item`, `combobox-label`, `combobox-empty`, `combobox-chips`, `combobox-chip`, `combobox-chip-remove` and `combobox-chip-input`.
- Highlighted items get `data-highlighted` and disabled items get `data-disabled`.
- The popup matches the width of its anchor through `--anchor-width` and limits its height to the available space.
- Uses the `popover`, `accent`, `primary`, `secondary` and `border` colors.
**React Native, SwiftUI, Jetpack Compose**
**React Native, Jetpack Compose**
```tsx
import * as React from "react"
import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "@/components/ui/combobox"
const frameworks = [
"Next.js",
"SvelteKit",
"Nuxt.js",
"Remix",
"Astro",
"Gatsby",
"Expo",
]
function ComboboxDemo({
defaultValue = null,
defaultOpen,
disabled,
showClear,
labelledBy,
invalid,
}: {
defaultValue?: string | null
defaultOpen?: boolean
disabled?: boolean
showClear?: boolean
labelledBy?: string
invalid?: boolean
}) {
const [value, setValue] = React.useState(defaultValue)
return (
No framework found.
{(item: string) => (
{item}
)}
)
}
export function ComboboxOpenByDefaultExample() {
return (
{children}
}
return children
}
function ComboboxTrigger({
className,
children,
...props
}: React.ComponentProps & {
children?: React.ReactNode
}) {
return (
cn(
"size-6 items-center justify-center rounded-full active:opacity-80",
resolveClassName(className, state)
)
}
{...props}
>
{children}
)
}
function ComboboxClear({
className,
...props
}: React.ComponentProps) {
return (
cn(
"size-6 items-center justify-center rounded-full active:opacity-80",
resolveClassName(className, state)
)
}
{...props}
>
)
}
function ComboboxInput({
className,
children,
disabled = false,
showTrigger = true,
showClear = false,
invalid,
onFocus,
onBlur,
...props
}: Omit, "className"> & {
className?: string
children?: React.ReactNode
showTrigger?: boolean
showClear?: boolean
invalid?: boolean
}) {
const combobox = ComboboxPrimitive.useComboboxRootContext("ComboboxInput")
const field = useFieldRootContext()
const [focused, setFocused] = React.useState(false)
const isDisabled = disabled || combobox.disabled
const isInvalid = invalid ?? field.state.invalid
const inPopup = useOptionalPositionerContext() !== null
const clearVisible =
showClear && (combobox.hasValue || combobox.inputValue !== "")
return (
{
setFocused(true)
onFocus?.(event)
}}
onBlur={(event) => {
setFocused(false)
onBlur?.(event)
}}
{...props}
/>
{showTrigger && !clearVisible ? (
)
}
type PositionerProps = React.ComponentProps
function ContentPopup({
className,
style,
chips,
...props
}: React.ComponentProps & { chips: boolean }) {
const positioner = useOptionalPositionerContext()
const anchorWidth = positioner?.anchorWidth ?? 0
const sizing = {
width: anchorWidth || undefined,
minWidth: chips ? anchorWidth : anchorWidth + 28,
maxWidth: positioner?.availableWidth,
maxHeight: positioner?.availableHeight,
}
return (
cn(
"relative overflow-hidden rounded-xl border border-foreground/5 bg-popover shadow-lg dark:border-foreground/10",
resolveClassName(className, state)
)
}
style={(state) => [
sizing,
resolveStyle(style, state) as StyleProp,
]}
{...props}
/>
)
}
function ComboboxContent({
className,
side = "bottom",
sideOffset = 6,
align = "start",
alignOffset = 0,
anchor,
portalHost,
...props
}: React.ComponentProps &
Pick<
PositionerProps,
"side" | "align" | "sideOffset" | "alignOffset" | "anchor"
> & {
portalHost?: string
}) {
return (
)
}
function ComboboxList({
className,
...props
}: React.ComponentProps) {
return (
cn("max-h-72", resolveClassName(className, state))}
contentContainerClassName="p-1.5"
showsVerticalScrollIndicator={false}
{...props}
/>
)
}
function ComboboxItem({
className,
children,
...props
}: Omit, "children"> & {
children?: React.ReactNode
}) {
return (
cn(
"relative w-full flex-row items-center gap-2.5 rounded-md py-2 pr-8 pl-3",
props.disabled && "opacity-50",
state.highlighted && "opacity-80",
resolveClassName(className, state)
)
}
{...props}
>
{wrapText(children, "flex-1")}
)
}
function ComboboxGroup({
className,
...props
}: React.ComponentProps) {
return ) {
return (
cn(
"px-3 py-2.5 text-xs font-semibold text-muted-foreground",
resolveClassName(className, state)
)
}
{...props}
/>
)
}
function ComboboxEmpty({
className,
children,
...props
}: React.ComponentProps) {
return (
cn(
"w-full items-center justify-center py-2",
resolveClassName(className, state)
)
}
{...props}
>
{wrapText(children, "text-center text-sm text-muted-foreground")}
)
}
function ComboboxSeparator({
className,
...props
}: React.ComponentProps) {
return (
cn("-mx-1.5 my-1.5 h-px bg-border", resolveClassName(className, state))
}
{...props}
/>
)
}
function ComboboxChips({
className,
invalid,
...props
}: React.ComponentProps & {
invalid?: boolean
}) {
const { hasValue, disabled } =
ComboboxPrimitive.useComboboxRootContext("ComboboxChips")
const field = useFieldRootContext()
const isInvalid = invalid ?? field.state.invalid
return (
cn(
"min-h-11 w-full flex-row flex-wrap items-center gap-1.5 rounded-lg border border-transparent bg-secondary px-3 py-1.5",
hasValue && "px-1.5",
isInvalid &&
"border-destructive bg-destructive/5 dark:bg-destructive/10",
disabled && "opacity-50",
resolveClassName(className, state)
)
}
{...props}
/>
)
}
function ComboboxChip({
className,
children,
showRemove = true,
...props
}: React.ComponentProps & {
showRemove?: boolean
}) {
return (
cn(
"h-5.5 flex-row items-center justify-center gap-1 rounded-full bg-primary/10 dark:bg-primary/20 px-2.5",
showRemove && "pr-0.5",
state.disabled && "opacity-50",
resolveClassName(className, state)
)
}
{...props}
>
{wrapText(children, "text-xs text-primary")}
{showRemove ? (
)
}
function ComboboxChipsInput({
className,
...props
}: React.ComponentProps) {
return (
cn(
"h-6 min-w-16 flex-1 px-1 py-0 text-[16px] text-foreground",
resolveClassName(className, state)
)
}
placeholderTextColorClassName="accent-muted-foreground"
cursorColorClassName="accent-primary"
selectionColorClassName="accent-primary"
{...props}
/>
)
}
function useComboboxAnchor() {
return React.useRef | null>(null)
}
export {
Combobox,
ComboboxChip,
ComboboxChips,
ComboboxChipsInput,
ComboboxCollection,
ComboboxContent,
ComboboxEmpty,
ComboboxGroup,
ComboboxInput,
ComboboxItem,
ComboboxLabel,
ComboboxList,
ComboboxSeparator,
ComboboxTrigger,
ComboboxValue,
useComboboxAnchor,
}
```
5. Update the import paths to match your project.
**NativeWind**
1. Install the dependencies:
```bash title="Terminal"
npx expo install cn nativewind phosphor-react-native react-native-reanimated react-native-screens react-native-svg react-native-worklets
```
2. Add the pieces it builds on: [Button](https://ui.suiss.app/docs/components/button), [Icon](https://ui.suiss.app/docs/components/icon), [Text](https://ui.suiss.app/docs/components/text), and the primitives `components/primitives/combobox.tsx`, `components/primitives/field.tsx`, `components/primitives/positioner.tsx`, `components/primitives/use-render.tsx`, and the animated view `components/ui/animated-view.tsx` from the next step.
3. Copy the animated view into `components/ui/animated-view.tsx`:
- `nativewind/components/ui/animated-view.tsx`: [source](https://github.com/e-suiss/ui/blob/main/packages/mobile/nativewind/components/ui/animated-view.tsx)
4. Copy the source into `components/ui/combobox.tsx`:
```tsx title="nativewind/components/ui/combobox.tsx"
import { cn } from "cn"
import { cssInterop } from "nativewind"
import { CaretDownIcon, CheckIcon, XIcon } from "phosphor-react-native"
import * as React from "react"
import {
Platform,
type StyleProp,
TextInput,
type View,
type ViewStyle,
} from "react-native"
import { FadeIn, FadeOut, ReduceMotion } from "react-native-reanimated"
import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens"
import * as ComboboxPrimitive from "@/components/primitives/combobox"
import { useFieldRootContext } from "@/components/primitives/field"
import { useOptionalPositionerContext } from "@/components/primitives/positioner"
import {
resolveClassName,
resolveStyle,
} from "@/components/primitives/use-render"
import { AnimatedView } from "@/components/ui/animated-view"
import { Button } from "@/components/ui/button"
import { Icon } from "@/components/ui/icon"
import { Text, TextClassContext } from "@/components/ui/text"
declare module "react-native" {
interface TextInputProps {
cursorColorClassName?: string
selectionColorClassName?: string
}
}
cssInterop(TextInput, {
className: { target: "style", nativeStyleToProp: { textAlign: true } },
placeholderClassName: {
target: false,
nativeStyleToProp: { color: "placeholderTextColor" },
},
cursorColorClassName: {
target: false,
nativeStyleToProp: { color: "cursorColor" },
},
selectionColorClassName: {
target: false,
nativeStyleToProp: { color: "selectionColor" },
},
})
const Combobox = ComboboxPrimitive.Root
const ComboboxValue = ComboboxPrimitive.Value
const ComboboxCollection = ComboboxPrimitive.Collection
const FullWindowOverlay =
Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment
function wrapText(children: React.ReactNode, className: string) {
if (typeof children === "string" || typeof children === "number") {
return {children}
}
return children
}
function ComboboxTrigger({
className,
children,
...props
}: React.ComponentProps & {
children?: React.ReactNode
}) {
return (
cn(
"size-6 items-center justify-center rounded-full active:opacity-80",
resolveClassName(className, state)
)
}
{...props}
>
{children}
)
}
function ComboboxClear({
className,
...props
}: React.ComponentProps) {
return (
cn(
"size-6 items-center justify-center rounded-full active:opacity-80",
resolveClassName(className, state)
)
}
{...props}
>
)
}
function ComboboxInput({
className,
children,
disabled = false,
showTrigger = true,
showClear = false,
invalid,
onFocus,
onBlur,
...props
}: Omit, "className"> & {
className?: string
children?: React.ReactNode
showTrigger?: boolean
showClear?: boolean
invalid?: boolean
}) {
const combobox = ComboboxPrimitive.useComboboxRootContext("ComboboxInput")
const field = useFieldRootContext()
const [focused, setFocused] = React.useState(false)
const isDisabled = disabled || combobox.disabled
const isInvalid = invalid ?? field.state.invalid
const inPopup = useOptionalPositionerContext() !== null
const clearVisible =
showClear && (combobox.hasValue || combobox.inputValue !== "")
return (
{
setFocused(true)
onFocus?.(event)
}}
onBlur={(event) => {
setFocused(false)
onBlur?.(event)
}}
{...props}
/>
{showTrigger && !clearVisible ? (
)
}
type PositionerProps = React.ComponentProps
function ContentPopup({
className,
style,
chips,
...props
}: React.ComponentProps & { chips: boolean }) {
const positioner = useOptionalPositionerContext()
const anchorWidth = positioner?.anchorWidth ?? 0
const sizing = {
width: anchorWidth || undefined,
minWidth: chips ? anchorWidth : anchorWidth + 28,
maxWidth: positioner?.availableWidth,
maxHeight: positioner?.availableHeight,
}
return (
cn(
"relative overflow-hidden rounded-xl border border-foreground-5 bg-popover shadow-lg dark:border-foreground-10",
resolveClassName(className, state)
)
}
style={(state) => [
sizing,
resolveStyle(style, state) as StyleProp,
]}
{...props}
/>
)
}
function ComboboxContent({
className,
side = "bottom",
sideOffset = 6,
align = "start",
alignOffset = 0,
anchor,
portalHost,
...props
}: React.ComponentProps &
Pick<
PositionerProps,
"side" | "align" | "sideOffset" | "alignOffset" | "anchor"
> & {
portalHost?: string
}) {
return (
)
}
function ComboboxList({
className,
...props
}: React.ComponentProps) {
return (
cn("max-h-72", resolveClassName(className, state))}
contentContainerClassName="p-1.5"
showsVerticalScrollIndicator={false}
{...props}
/>
)
}
function ComboboxItem({
className,
children,
...props
}: Omit, "children"> & {
children?: React.ReactNode
}) {
return (
cn(
"relative w-full flex-row items-center gap-2.5 rounded-md py-2 pr-8 pl-3",
props.disabled && "opacity-50",
state.highlighted && "opacity-80",
resolveClassName(className, state)
)
}
{...props}
>
{wrapText(children, "flex-1")}
)
}
function ComboboxGroup({
className,
...props
}: React.ComponentProps) {
return ) {
return (
cn(
"px-3 py-2.5 text-xs font-semibold text-muted-foreground",
resolveClassName(className, state)
)
}
{...props}
/>
)
}
function ComboboxEmpty({
className,
children,
...props
}: React.ComponentProps) {
return (
cn(
"w-full items-center justify-center py-2",
resolveClassName(className, state)
)
}
{...props}
>
{wrapText(children, "text-center text-sm text-muted-foreground")}
)
}
function ComboboxSeparator({
className,
...props
}: React.ComponentProps) {
return (
cn("-mx-1.5 my-1.5 h-px bg-border", resolveClassName(className, state))
}
{...props}
/>
)
}
function ComboboxChips({
className,
invalid,
...props
}: React.ComponentProps & {
invalid?: boolean
}) {
const { hasValue, disabled } =
ComboboxPrimitive.useComboboxRootContext("ComboboxChips")
const field = useFieldRootContext()
const isInvalid = invalid ?? field.state.invalid
return (
cn(
"min-h-11 w-full flex-row flex-wrap items-center gap-1.5 rounded-lg border border-transparent bg-secondary px-3 py-1.5",
hasValue && "px-1.5",
isInvalid &&
"border-destructive bg-destructive-5 dark:bg-destructive-10",
disabled && "opacity-50",
resolveClassName(className, state)
)
}
{...props}
/>
)
}
function ComboboxChip({
className,
children,
showRemove = true,
...props
}: React.ComponentProps & {
showRemove?: boolean
}) {
return (
cn(
"h-[1.375rem] flex-row items-center justify-center gap-1 rounded-full bg-primary-10 dark:bg-primary-20 px-2.5",
showRemove && "pr-0.5",
state.disabled && "opacity-50",
resolveClassName(className, state)
)
}
{...props}
>
{wrapText(children, "text-xs text-primary")}
{showRemove ? (
)
}
function ComboboxChipsInput({
className,
...props
}: React.ComponentProps) {
return (
cn(
"h-6 min-w-16 flex-1 px-1 py-0 text-[16px] text-foreground",
resolveClassName(className, state)
)
}
placeholderClassName="text-muted-foreground"
cursorColorClassName="text-primary"
selectionColorClassName="text-primary"
{...props}
/>
)
}
function useComboboxAnchor() {
return React.useRef | null>(null)
}
export {
Combobox,
ComboboxChip,
ComboboxChips,
ComboboxChipsInput,
ComboboxCollection,
ComboboxContent,
ComboboxEmpty,
ComboboxGroup,
ComboboxInput,
ComboboxItem,
ComboboxLabel,
ComboboxList,
ComboboxSeparator,
ComboboxTrigger,
ComboboxValue,
useComboboxAnchor,
}
```
5. Update the import paths to match your project.
**StyleSheet**
1. Install the dependencies:
```bash title="Terminal"
npx expo install phosphor-react-native react-native-reanimated react-native-screens react-native-svg react-native-worklets
```
2. Add the pieces it builds on: [Button](https://ui.suiss.app/docs/components/button), [Icon](https://ui.suiss.app/docs/components/icon), [Text](https://ui.suiss.app/docs/components/text), and the primitives `components/primitives/combobox.tsx`, `components/primitives/field.tsx`, `components/primitives/positioner.tsx`, `components/primitives/use-render.tsx`, and the animated view `components/ui/animated-view.tsx` from the next step.
3. Copy the animated view into `components/ui/animated-view.tsx`:
- `stylesheet/components/ui/animated-view.tsx`: [source](https://github.com/e-suiss/ui/blob/main/packages/mobile/stylesheet/components/ui/animated-view.tsx)
4. Copy the source into `components/ui/combobox.tsx`:
```tsx title="stylesheet/components/ui/combobox.tsx"
import { CaretDownIcon, CheckIcon, XIcon } from "phosphor-react-native"
import * as React from "react"
import {
Platform,
type StyleProp,
StyleSheet,
type TextStyle,
type View,
type ViewStyle,
} from "react-native"
import { FadeIn, FadeOut, ReduceMotion } from "react-native-reanimated"
import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens"
import * as ComboboxPrimitive from "@/components/primitives/combobox"
import { useFieldRootContext } from "@/components/primitives/field"
import { useOptionalPositionerContext } from "@/components/primitives/positioner"
import { resolveStyle } from "@/components/primitives/use-render"
import { AnimatedView } from "@/components/ui/animated-view"
import { Button } from "@/components/ui/button"
import { Icon } from "@/components/ui/icon"
import { Text, TextStyleContext } from "@/components/ui/text"
import { fontSize, radius, shadow, useTheme } from "@/components/ui/theme"
function withAlpha(color: string, alpha: number) {
if (!color.startsWith("#") || color.length !== 7) return color
const r = Number.parseInt(color.slice(1, 3), 16)
const g = Number.parseInt(color.slice(3, 5), 16)
const b = Number.parseInt(color.slice(5, 7), 16)
return `rgba(${r}, ${g}, ${b}, ${alpha})`
}
const Combobox = ComboboxPrimitive.Root
const ComboboxValue = ComboboxPrimitive.Value
const ComboboxCollection = ComboboxPrimitive.Collection
const FullWindowOverlay =
Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment
const styles = StyleSheet.create({
iconButton: {
width: 24,
height: 24,
alignItems: "center",
justifyContent: "center",
borderRadius: radius.full,
},
inputGroup: {
height: 44,
width: "100%",
minWidth: 0,
flexDirection: "row",
alignItems: "center",
gap: 4,
borderRadius: radius.lg,
borderWidth: 1,
borderColor: "transparent",
paddingRight: 8,
},
inputGroupInPopup: {
width: "auto",
height: 32,
margin: 6,
marginBottom: 0,
},
input: {
height: "100%",
minWidth: 0,
flex: 1,
paddingLeft: 12,
paddingRight: 6,
paddingVertical: 4,
fontSize: fontSize.base.fontSize,
},
content: {
position: "relative",
overflow: "hidden",
borderRadius: radius.xl,
borderWidth: 1,
...shadow.lg,
},
list: { maxHeight: 288 },
listContent: { padding: 6 },
item: {
position: "relative",
width: "100%",
flexDirection: "row",
alignItems: "center",
gap: 10,
borderRadius: radius.md,
paddingVertical: 8,
paddingRight: 32,
paddingLeft: 12,
},
itemText: { flex: 1, ...fontSize.base, userSelect: "none" },
indicator: {
position: "absolute",
right: 8,
width: 16,
height: 16,
alignItems: "center",
justifyContent: "center",
},
label: {
paddingHorizontal: 12,
paddingVertical: 10,
...fontSize.xs,
fontWeight: "600",
},
empty: {
width: "100%",
alignItems: "center",
justifyContent: "center",
paddingVertical: 8,
},
emptyText: { ...fontSize.sm, textAlign: "center" },
separator: { marginHorizontal: -6, marginVertical: 6, height: 1 },
chips: {
minHeight: 44,
width: "100%",
flexDirection: "row",
flexWrap: "wrap",
alignItems: "center",
gap: 6,
borderRadius: radius.lg,
borderWidth: 1,
borderColor: "transparent",
paddingHorizontal: 12,
paddingVertical: 6,
},
chipsFilled: { paddingHorizontal: 6 },
chip: {
height: 22,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
gap: 4,
borderRadius: radius.full,
paddingHorizontal: 10,
},
chipRemovable: { paddingRight: 2 },
chipText: { ...fontSize.xs },
chipRemove: { marginLeft: -4, opacity: 0.5 },
chipsInput: {
height: 24,
minWidth: 64,
flex: 1,
paddingHorizontal: 4,
paddingVertical: 0,
fontSize: fontSize.base.fontSize,
},
})
function wrapText(children: React.ReactNode, style: StyleProp) {
if (typeof children === "string" || typeof children === "number") {
return {children}
}
return children
}
function ComboboxTrigger({
style,
children,
...props
}: React.ComponentProps & {
children?: React.ReactNode
}) {
const { colors } = useTheme()
return (
[
styles.iconButton,
resolveStyle(style, state) as StyleProp,
]}
{...props}
>
{children}
)
}
function ComboboxClear({
style,
...props
}: React.ComponentProps) {
const { colors } = useTheme()
return (
[
styles.iconButton,
resolveStyle(style, state) as StyleProp,
]}
{...props}
>
)
}
function ComboboxInput({
style,
children,
disabled = false,
showTrigger = true,
showClear = false,
invalid,
onFocus,
onBlur,
...props
}: Omit, "style"> & {
style?: StyleProp
children?: React.ReactNode
showTrigger?: boolean
showClear?: boolean
invalid?: boolean
}) {
const { colors, isDark } = useTheme()
const combobox = ComboboxPrimitive.useComboboxRootContext("ComboboxInput")
const field = useFieldRootContext()
const [focused, setFocused] = React.useState(false)
const isDisabled = disabled || combobox.disabled
const isInvalid = invalid ?? field.state.invalid
const inPopup = useOptionalPositionerContext() !== null
const clearVisible =
showClear && (combobox.hasValue || combobox.inputValue !== "")
return (
{
setFocused(true)
onFocus?.(event)
}}
onBlur={(event) => {
setFocused(false)
onBlur?.(event)
}}
{...props}
/>
{showTrigger && !clearVisible ? (
)
}
type PositionerProps = React.ComponentProps
function ContentPopup({
style,
chips,
...props
}: React.ComponentProps & { chips: boolean }) {
const { colors, isDark } = useTheme()
const positioner = useOptionalPositionerContext()
const anchorWidth = positioner?.anchorWidth ?? 0
const sizing: ViewStyle = {
width: anchorWidth || undefined,
minWidth: chips ? anchorWidth : anchorWidth + 28,
maxWidth: positioner?.availableWidth,
maxHeight: positioner?.availableHeight,
}
return (
[
styles.content,
{
borderColor: `${colors.foreground}${isDark ? "1a" : "0d"}`,
backgroundColor: colors.popover,
},
sizing,
resolveStyle(style, state) as StyleProp,
]}
{...props}
/>
)
}
function ComboboxContent({
style,
side = "bottom",
sideOffset = 6,
align = "start",
alignOffset = 0,
anchor,
portalHost,
...props
}: React.ComponentProps &
Pick<
PositionerProps,
"side" | "align" | "sideOffset" | "alignOffset" | "anchor"
> & {
portalHost?: string
}) {
const { colors } = useTheme()
return (
)
}
function ComboboxList({
style,
...props
}: React.ComponentProps) {
return (
[
styles.list,
resolveStyle(style, state) as StyleProp,
]}
contentContainerStyle={styles.listContent}
showsVerticalScrollIndicator={false}
{...props}
/>
)
}
function ComboboxItem({
style,
children,
...props
}: Omit, "children"> & {
children?: React.ReactNode
}) {
const { colors } = useTheme()
return (
[
styles.item,
state.highlighted && { opacity: 0.8 },
props.disabled && { opacity: 0.5 },
resolveStyle(style, state) as StyleProp,
]}
{...props}
>
{wrapText(children, [styles.itemText, { color: colors.foreground }])}
)
}
function ComboboxGroup(
props: React.ComponentProps
) {
return ) {
const { colors } = useTheme()
return (
[
styles.label,
{ color: colors.mutedForeground },
resolveStyle(style, state) as StyleProp,
]}
{...props}
/>
)
}
function ComboboxEmpty({
style,
children,
...props
}: React.ComponentProps) {
const { colors } = useTheme()
return (
[
styles.empty,
resolveStyle(style, state) as StyleProp,
]}
{...props}
>
{wrapText(children, [
styles.emptyText,
{ color: colors.mutedForeground },
])}
)
}
function ComboboxSeparator({
style,
...props
}: React.ComponentProps) {
const { colors } = useTheme()
return (
[
styles.separator,
{ backgroundColor: colors.border },
resolveStyle(style, state) as StyleProp,
]}
{...props}
/>
)
}
function ComboboxChips({
style,
invalid,
...props
}: React.ComponentProps & {
invalid?: boolean
}) {
const { colors, isDark } = useTheme()
const { hasValue, disabled } =
ComboboxPrimitive.useComboboxRootContext("ComboboxChips")
const field = useFieldRootContext()
const isInvalid = invalid ?? field.state.invalid
return (
[
styles.chips,
{ backgroundColor: colors.secondary },
hasValue && styles.chipsFilled,
isInvalid && {
borderColor: colors.destructive,
backgroundColor: `${colors.destructive}${isDark ? "1a" : "0d"}`,
},
disabled && { opacity: 0.5 },
resolveStyle(style, state) as StyleProp,
]}
{...props}
/>
)
}
function ComboboxChip({
style,
children,
showRemove = true,
...props
}: React.ComponentProps & {
showRemove?: boolean
}) {
const { colors, isDark } = useTheme()
const color = colors.primary
return (
[
styles.chip,
{ backgroundColor: withAlpha(colors.primary, isDark ? 0.2 : 0.1) },
showRemove && styles.chipRemovable,
state.disabled && { opacity: 0.5 },
resolveStyle(style, state) as StyleProp,
]}
{...props}
>
{wrapText(children, [styles.chipText, { color }])}
{showRemove ? (
)
}
function ComboboxChipsInput({
style,
...props
}: React.ComponentProps) {
const { colors } = useTheme()
return (
[
styles.chipsInput,
{ color: colors.foreground },
resolveStyle(style, state) as StyleProp,
]}
placeholderTextColor={colors.mutedForeground}
cursorColor={colors.primary}
selectionColor={colors.primary}
{...props}
/>
)
}
function useComboboxAnchor() {
return React.useRef | null>(null)
}
export {
Combobox,
ComboboxChip,
ComboboxChips,
ComboboxChipsInput,
ComboboxCollection,
ComboboxContent,
ComboboxEmpty,
ComboboxGroup,
ComboboxInput,
ComboboxItem,
ComboboxLabel,
ComboboxList,
ComboboxSeparator,
ComboboxTrigger,
ComboboxValue,
useComboboxAnchor,
}
```
5. Update the import paths to match your project.
**SwiftUI**
1. Target iOS 17 or later.
2. Add the Swift package to your app:
```swift title="Package.swift"
.package(url: "https://github.com/phosphor-icons/swift", from: "2.1.0")
```
3. Copy the theme files every view uses:
- `swift/Theme/Theme.swift`: [source](https://github.com/e-suiss/ui/blob/main/packages/mobile/swiftui/Sources/EsuissUI/Theme/Theme.swift)
- `swift/Theme/Tokens.swift`: [source](https://github.com/e-suiss/ui/blob/main/packages/mobile/swiftui/Sources/EsuissUI/Theme/Tokens.swift)
4. Copy the source and every file it uses:
```swift title="swift/Components/Combobox.swift"
import PhosphorSwift
import SwiftUI
public struct Combobox: View {
let items: [Item]
let single: Binding?
let multiple: Binding<[Item]>?
let placeholder: LocalizedStringKey
let searchPlaceholder: LocalizedStringKey
let emptyText: LocalizedStringKey
let title: (Item) -> String
@State private var open = false
@Environment(\.isEnabled) private var isEnabled
@Environment(\.isInvalid) private var invalid
@Environment(\.colorScheme) private var colorScheme
public init(
_ items: [Item],
selection: Binding,
placeholder: LocalizedStringKey = "Select",
searchPlaceholder: LocalizedStringKey = "Search",
emptyText: LocalizedStringKey = "No items found.",
title: @escaping (Item) -> String
) {
self.items = items
self.single = selection
self.multiple = nil
self.placeholder = placeholder
self.searchPlaceholder = searchPlaceholder
self.emptyText = emptyText
self.title = title
}
public init(
_ items: [Item],
selection: Binding<[Item]>,
placeholder: LocalizedStringKey = "Select",
searchPlaceholder: LocalizedStringKey = "Search",
emptyText: LocalizedStringKey = "No items found.",
title: @escaping (Item) -> String
) {
self.items = items
self.single = nil
self.multiple = selection
self.placeholder = placeholder
self.searchPlaceholder = searchPlaceholder
self.emptyText = emptyText
self.title = title
}
public var body: some View {
trigger
.anchoredPopup(
isPresented: $open,
side: .bottom,
align: .start,
matchWidth: true,
minWidth: 144,
maxHeight: 340
) {
ComboboxPanel(
items: items,
single: single,
multiple: multiple,
searchPlaceholder: searchPlaceholder,
emptyText: emptyText,
title: title
)
}
}
private var shape: RoundedRectangle {
RoundedRectangle(cornerRadius: Radius.lg, style: .continuous)
}
private var background: Color {
if invalid { return EsuissColor.destructive.opacity(colorScheme == .dark ? 0.1 : 0.05) }
return EsuissColor.secondary
}
@ViewBuilder private var trigger: some View {
if let multiple {
chips(multiple)
} else if let single {
input(single)
}
}
private func input(_ selection: Binding) -> some View {
HStack(spacing: 4) {
Button {
open = true
} label: {
Group {
if let value = selection.wrappedValue {
Text(verbatim: title(value))
.foregroundStyle(EsuissColor.foreground)
} else {
Text(placeholder)
.foregroundStyle(EsuissColor.mutedForeground)
}
}
.scaledFont(TextStyle.base)
.lineLimit(1)
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
.padding(.leading, 12)
.contentShape(Rectangle())
}
.buttonStyle(.plain)
.accessibilityHint(Text("Shows options"))
if selection.wrappedValue != nil {
Button {
selection.wrappedValue = nil
} label: {
Ph.x.regular
.frame(width: 16, height: 16)
.foregroundStyle(EsuissColor.foreground)
}
.buttonStyle(ComboboxIconButtonStyle())
.accessibilityLabel(Text("Clear"))
}
Button {
open = true
} label: {
Ph.caretDown.regular
.frame(width: 16, height: 16)
.foregroundStyle(EsuissColor.mutedForeground)
}
.buttonStyle(ComboboxIconButtonStyle())
.accessibilityHidden(true)
}
.padding(.trailing, 8)
.frame(height: 44)
.background(background, in: shape)
.overlay {
if invalid { shape.strokeBorder(EsuissColor.destructive) }
}
.opacity(isEnabled ? 1 : 0.5)
}
private func chips(_ selection: Binding<[Item]>) -> some View {
let values = selection.wrappedValue
return ComboboxFlowLayout(spacing: 6) {
ForEach(values, id: \.self) { value in
ComboboxChip(text: title(value)) {
selection.wrappedValue.removeAll { $0 == value }
}
}
if values.isEmpty {
Text(placeholder)
.scaledFont(TextStyle.base)
.foregroundStyle(EsuissColor.mutedForeground)
.lineLimit(1)
}
}
.padding(.horizontal, values.isEmpty ? 12 : 6)
.padding(.vertical, 6)
.frame(maxWidth: .infinity, minHeight: 44, alignment: .leading)
.background(background, in: shape)
.overlay {
if invalid { shape.strokeBorder(EsuissColor.destructive) }
}
.opacity(isEnabled ? 1 : 0.5)
.contentShape(shape)
.onTapGesture {
if isEnabled { open = true }
}
.accessibilityElement(children: .contain)
.accessibilityAction(named: Text("Show options")) { open = true }
}
}
extension Combobox where Item == String {
public init(
_ items: [String],
selection: Binding,
placeholder: LocalizedStringKey = "Select",
searchPlaceholder: LocalizedStringKey = "Search",
emptyText: LocalizedStringKey = "No items found."
) {
self.init(
items,
selection: selection,
placeholder: placeholder,
searchPlaceholder: searchPlaceholder,
emptyText: emptyText
) { $0 }
}
public init(
_ items: [String],
selection: Binding<[String]>,
placeholder: LocalizedStringKey = "Select",
searchPlaceholder: LocalizedStringKey = "Search",
emptyText: LocalizedStringKey = "No items found."
) {
self.init(
items,
selection: selection,
placeholder: placeholder,
searchPlaceholder: searchPlaceholder,
emptyText: emptyText
) { $0 }
}
}
private struct ComboboxIconButtonStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.label
.frame(width: 24, height: 24)
.opacity(configuration.isPressed ? 0.8 : 1)
.contentShape(Circle().inset(by: -6))
}
}
private struct ComboboxChip: View {
let text: String
let remove: () -> Void
@Environment(\.isEnabled) private var isEnabled
var body: some View {
HStack(spacing: 2) {
Text(verbatim: text)
.scaledFont(TextStyle.xs)
.lineLimit(1)
Button(action: remove) {
Ph.x.regular
.frame(width: 12, height: 12)
.frame(width: 20, height: 20)
.contentShape(Rectangle())
}
.buttonStyle(ChipRemoveStyle())
.accessibilityLabel(Text("Remove \(text)"))
}
.foregroundStyle(EsuissColor.primary)
.padding(.leading, 10)
.padding(.trailing, 2)
.frame(height: 22)
.background(Color.adaptive(light: EsuissColor.primary.opacity(0.1), dark: EsuissColor.primary.opacity(0.2)), in: Capsule())
}
}
private struct ChipRemoveStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.label.opacity(configuration.isPressed ? 1 : 0.5)
}
}
struct ComboboxFlowLayout: Layout {
var spacing: CGFloat
func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
let rows = arrange(width: proposal.width ?? .infinity, subviews: subviews)
let width = rows.map(\.width).max() ?? 0
let height = rows.map(\.height).reduce(0, +) + spacing * CGFloat(max(rows.count - 1, 0))
return CGSize(width: proposal.width ?? width, height: height)
}
func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
var y = bounds.minY
for row in arrange(width: bounds.width, subviews: subviews) {
var x = bounds.minX
for index in row.indices {
let size = subviews[index].sizeThatFits(.unspecified)
subviews[index].place(
at: CGPoint(x: x, y: y + (row.height - size.height) / 2),
anchor: .topLeading,
proposal: ProposedViewSize(width: min(size.width, bounds.width), height: size.height)
)
x += size.width + spacing
}
y += row.height + spacing
}
}
private struct Row {
var indices: [Int] = []
var width: CGFloat = 0
var height: CGFloat = 0
}
private func arrange(width: CGFloat, subviews: Subviews) -> [Row] {
var rows: [Row] = []
var row = Row()
for index in subviews.indices {
let size = subviews[index].sizeThatFits(.unspecified)
let next = row.indices.isEmpty ? size.width : row.width + spacing + size.width
if !row.indices.isEmpty && next > width {
rows.append(row)
row = Row()
}
row.width = row.indices.isEmpty ? size.width : row.width + spacing + size.width
row.height = max(row.height, size.height)
row.indices.append(index)
}
if !row.indices.isEmpty { rows.append(row) }
return rows
}
}
struct ComboboxPanel: View {
let items: [Item]
let single: Binding?
let multiple: Binding<[Item]>?
let searchPlaceholder: LocalizedStringKey
let emptyText: LocalizedStringKey
let title: (Item) -> String
var initialQuery = ""
var autofocus = true
@State private var query = ""
@FocusState private var focused: Bool
@Environment(\.overlayDismiss) private var dismiss
var body: some View {
let filtered = items.filter { query.isEmpty || title($0).localizedCaseInsensitiveContains(query) }
let list = VStack(alignment: .leading, spacing: 0) {
if filtered.isEmpty {
Text(emptyText)
.scaledFont(TextStyle.sm)
.foregroundStyle(EsuissColor.mutedForeground)
.multilineTextAlignment(.center)
.frame(maxWidth: .infinity)
.padding(.vertical, 8)
}
ForEach(filtered, id: \.self) { item in
row(item)
}
}
.padding(6)
VStack(spacing: 0) {
TextField(searchPlaceholder, text: $query)
.focused($focused)
.textInputAutocapitalization(.never)
.autocorrectionDisabled()
.scaledFont(TextStyle.base)
.foregroundStyle(EsuissColor.foreground)
.tint(EsuissColor.primary)
.padding(.horizontal, 12)
.frame(height: 32)
.background(EsuissColor.secondary, in: RoundedRectangle(cornerRadius: Radius.lg, style: .continuous))
.overlay {
RoundedRectangle(cornerRadius: Radius.lg, style: .continuous)
.strokeBorder(EsuissColor.border.opacity(0.3))
}
.padding([.horizontal, .top], 6)
ViewThatFits(in: .vertical) {
list
ScrollView { list }
}
}
.scaledFont(TextStyle.base)
.foregroundStyle(EsuissColor.foreground)
.popupSurface(radius: Radius.xl)
.accessibilityElement(children: .contain)
.onAppear {
query = initialQuery
if autofocus { focused = true }
}
}
private func isSelected(_ item: Item) -> Bool {
if let multiple { return multiple.wrappedValue.contains(item) }
return single?.wrappedValue == item
}
private func row(_ item: Item) -> some View {
let selected = isSelected(item)
return Button {
if let multiple {
if selected {
multiple.wrappedValue.removeAll { $0 == item }
} else {
multiple.wrappedValue.append(item)
}
} else {
single?.wrappedValue = item
dismiss?()
}
} label: {
Text(verbatim: title(item))
}
.buttonStyle(MenuRowStyle(trailing: 32))
.overlay(alignment: .trailing) {
if selected {
Ph.check.regular
.frame(width: 16, height: 16)
.foregroundStyle(EsuissColor.primary)
.padding(.trailing, 8)
.accessibilityHidden(true)
}
}
.accessibilityAddTraits(selected ? .isSelected : [])
}
}
```
- `swift/Components/Button.swift`: see [Button](https://ui.suiss.app/docs/components/button.md)
- `swift/Components/ButtonGroup.swift`: see [Button Group](https://ui.suiss.app/docs/components/button-group.md)
- `swift/Components/DropdownMenu.swift`: see [Dropdown Menu](https://ui.suiss.app/docs/components/dropdown-menu.md)
- `swift/Components/Field.swift`: see [Field](https://ui.suiss.app/docs/components/field.md)
- `swift/Components/Item.swift`: see [Item](https://ui.suiss.app/docs/components/item.md)
- `swift/Components/Overlay.swift`: [source](https://github.com/e-suiss/ui/blob/main/packages/mobile/swiftui/Sources/EsuissUI/Components/Overlay.swift)
- `swift/Components/Select.swift`: see [Select](https://ui.suiss.app/docs/components/select.md)
- `swift/Components/Separator.swift`: see [Separator](https://ui.suiss.app/docs/components/separator.md)
- `swift/Components/TextVariant.swift`: [source](https://github.com/e-suiss/ui/blob/main/packages/mobile/swiftui/Sources/EsuissUI/Components/TextVariant.swift)
5. Add the files to your app target.
**Jetpack Compose**
1. Set `minSdk` to 24 or higher and add the dependencies:
```kotlin title="build.gradle.kts"
implementation(platform("androidx.compose:compose-bom:2026.09.00"))
implementation("androidx.compose.foundation:foundation")
implementation("androidx.compose.ui:ui")
implementation("com.adamglin:phosphor-icon-android:1.0.0")
```
2. Copy the theme files every view uses:
- `kotlin/theme/Theme.kt`: [source](https://github.com/e-suiss/ui/blob/main/packages/mobile/kotlin/ui/src/main/kotlin/com/esuiss/ui/theme/Theme.kt)
- `kotlin/theme/Tokens.kt`: [source](https://github.com/e-suiss/ui/blob/main/packages/mobile/kotlin/ui/src/main/kotlin/com/esuiss/ui/theme/Tokens.kt)
3. Copy the source and every file it uses:
```kt title="kotlin/components/Combobox.kt"
package com.esuiss.ui.components
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.PressInteraction
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.selection.toggleable
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicText
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.selection.LocalTextSelectionColors
import androidx.compose.foundation.text.selection.TextSelectionColors
import androidx.compose.foundation.verticalScroll
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberUpdatedState
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.input.key.Key
import androidx.compose.ui.input.key.KeyEventType
import androidx.compose.ui.input.key.key
import androidx.compose.ui.input.key.onPreviewKeyEvent
import androidx.compose.ui.input.key.type
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.heading
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import com.adamglin.PhosphorIcons
import com.adamglin.phosphoricons.Regular
import com.adamglin.phosphoricons.regular.CaretDown
import com.adamglin.phosphoricons.regular.Check
import com.adamglin.phosphoricons.regular.X
import com.esuiss.ui.theme.Colors
import com.esuiss.ui.theme.EsuissTheme
import com.esuiss.ui.theme.Radius
import com.esuiss.ui.theme.Typography
private fun comboboxSelectionColors(colors: Colors) = TextSelectionColors(
handleColor = colors.primary,
backgroundColor = colors.primary.copy(alpha = 0.3f),
)
@Composable
fun Combobox(
items: List,
value: T?,
onValueChange: (T?) -> Unit,
modifier: Modifier = Modifier,
itemText: (T) -> String = { it.toString() },
placeholder: String = "",
emptyText: String = "No items found.",
groupBy: ((T) -> String)? = null,
showTrigger: Boolean = true,
showClear: Boolean = false,
invalid: Boolean? = null,
enabled: Boolean = true,
filter: (T, String) -> Boolean = { item, query -> itemText(item).contains(query, ignoreCase = true) },
) {
val colors = EsuissTheme.colors
val field = LocalFieldState.current
val isInvalid = invalid ?: field.invalid
val isEnabled = enabled && field.enabled
val selectedText = value?.let(itemText).orEmpty()
var query by remember { mutableStateOf(selectedText) }
var filtering by remember { mutableStateOf(false) }
var expanded by remember { mutableStateOf(false) }
var focused by remember { mutableStateOf(false) }
val currentSelectedText by rememberUpdatedState(selectedText)
LaunchedEffect(selectedText) {
if (!filtering) query = selectedText
}
val interaction = remember { MutableInteractionSource() }
LaunchedEffect(interaction) {
interaction.interactions.collect { if (it is PressInteraction.Release) expanded = true }
}
val visible = if (filtering && query.isNotEmpty()) items.filter { filter(it, query) } else items
val clearVisible = showClear && (value != null || query.isNotEmpty())
val shape = RoundedCornerShape(Radius.lg)
val foreground = colors.foreground
Box(modifier = modifier) {
Row(
modifier = Modifier
.fillMaxWidth()
.height(44.dp)
.alpha(if (isEnabled) 1f else 0.5f)
.clip(shape)
.background(controlBackground(colors, isInvalid), shape)
.border(
1.dp,
when {
isInvalid -> colors.destructive
focused -> colors.ring
else -> Color.Transparent
},
shape,
)
.padding(end = 8.dp),
horizontalArrangement = Arrangement.spacedBy(4.dp),
verticalAlignment = Alignment.CenterVertically,
) {
CompositionLocalProvider(LocalTextSelectionColors provides comboboxSelectionColors(colors)) {
BasicTextField(
value = query,
onValueChange = {
query = it
filtering = true
expanded = true
},
modifier = Modifier
.weight(1f)
.padding(start = 12.dp, end = 6.dp)
.onFocusChanged { state ->
focused = state.isFocused
if (!state.isFocused) {
expanded = false
filtering = false
query = currentSelectedText
}
},
enabled = isEnabled,
singleLine = true,
textStyle = Typography.base.copy(color = foreground),
cursorBrush = SolidColor(colors.primary),
interactionSource = interaction,
decorationBox = { inner ->
Box(contentAlignment = Alignment.CenterStart) {
if (query.isEmpty()) {
BasicText(
placeholder,
style = Typography.base.copy(
color = colors.mutedForeground,
),
maxLines = 1,
)
}
inner()
}
},
)
}
if (showTrigger && !clearVisible) {
ComboboxIconButton(PhosphorIcons.Regular.CaretDown, "Show options", isEnabled, colors.mutedForeground) {
expanded = !expanded
}
}
if (clearVisible) {
ComboboxIconButton(PhosphorIcons.Regular.X, "Clear", isEnabled, colors.foreground) {
query = ""
filtering = false
onValueChange(null)
}
}
}
ComboboxPopup(
expanded = expanded,
onDismissRequest = { expanded = false },
items = visible,
isSelected = { it == value },
itemText = itemText,
groupBy = groupBy,
emptyText = emptyText,
onItemClick = { item ->
onValueChange(item)
query = itemText(item)
filtering = false
expanded = false
},
)
}
}
@Composable
fun MultiCombobox(
items: List,
values: List,
onValuesChange: (List) -> Unit,
modifier: Modifier = Modifier,
itemText: (T) -> String = { it.toString() },
placeholder: String = "",
emptyText: String = "No items found.",
groupBy: ((T) -> String)? = null,
invalid: Boolean? = null,
enabled: Boolean = true,
filter: (T, String) -> Boolean = { item, query -> itemText(item).contains(query, ignoreCase = true) },
) {
val colors = EsuissTheme.colors
val field = LocalFieldState.current
val isInvalid = invalid ?: field.invalid
val isEnabled = enabled && field.enabled
var query by remember { mutableStateOf("") }
var expanded by remember { mutableStateOf(false) }
val interaction = remember { MutableInteractionSource() }
LaunchedEffect(interaction) {
interaction.interactions.collect { if (it is PressInteraction.Release) expanded = true }
}
val visible = if (query.isNotEmpty()) items.filter { filter(it, query) } else items
val shape = RoundedCornerShape(Radius.lg)
val hasValue = values.isNotEmpty()
Box(modifier = modifier) {
FlowRow(
modifier = Modifier
.fillMaxWidth()
.heightIn(min = 44.dp)
.alpha(if (isEnabled) 1f else 0.5f)
.clip(shape)
.background(controlBackground(colors, isInvalid), shape)
.border(1.dp, if (isInvalid) colors.destructive else Color.Transparent, shape)
.padding(horizontal = if (hasValue) 6.dp else 12.dp, vertical = 6.dp),
horizontalArrangement = Arrangement.spacedBy(6.dp),
verticalArrangement = Arrangement.spacedBy(6.dp, Alignment.CenterVertically),
itemVerticalAlignment = Alignment.CenterVertically,
) {
values.forEach { item ->
ComboboxChip(itemText(item), isEnabled) { onValuesChange(values - item) }
}
CompositionLocalProvider(LocalTextSelectionColors provides comboboxSelectionColors(colors)) {
BasicTextField(
value = query,
onValueChange = {
query = it
expanded = true
},
modifier = Modifier
.weight(1f)
.widthIn(min = 64.dp)
.height(30.dp)
.padding(horizontal = 4.dp)
.onFocusChanged { if (!it.isFocused) expanded = false }
.onPreviewKeyEvent { event ->
if (event.type == KeyEventType.KeyDown && event.key == Key.Backspace && query.isEmpty() && hasValue) {
onValuesChange(values.dropLast(1))
true
} else {
false
}
},
enabled = isEnabled,
singleLine = true,
textStyle = Typography.base.copy(color = colors.foreground),
cursorBrush = SolidColor(colors.primary),
interactionSource = interaction,
decorationBox = { inner ->
Box(contentAlignment = Alignment.CenterStart) {
if (query.isEmpty() && !hasValue) {
BasicText(placeholder, style = Typography.base.copy(color = colors.mutedForeground), maxLines = 1)
}
inner()
}
},
)
}
}
ComboboxPopup(
expanded = expanded,
onDismissRequest = { expanded = false },
items = visible,
isSelected = { it in values },
itemText = itemText,
groupBy = groupBy,
emptyText = emptyText,
onItemClick = { item ->
onValuesChange(if (item in values) values - item else values + item)
query = ""
},
)
}
}
@Composable
private fun ComboboxIconButton(
icon: ImageVector,
label: String,
enabled: Boolean,
tint: Color,
onClick: () -> Unit,
) {
val colors = EsuissTheme.colors
val interaction = remember { MutableInteractionSource() }
val pressed by interaction.collectIsPressedAsState()
Box(
modifier = Modifier
.size(32.dp)
.clickable(interactionSource = interaction, indication = null, enabled = enabled, role = Role.Button, onClick = onClick)
.semantics { contentDescription = label },
contentAlignment = Alignment.Center,
) {
Box(
modifier = Modifier
.size(24.dp)
.alpha(if (pressed) 0.8f else 1f),
contentAlignment = Alignment.Center,
) {
Icon(icon, contentDescription = null, size = 16.dp, tint = tint)
}
}
}
@Composable
private fun ComboboxChip(text: String, enabled: Boolean, onRemove: () -> Unit) {
val colors = EsuissTheme.colors
val interaction = remember { MutableInteractionSource() }
val pressed by interaction.collectIsPressedAsState()
val foreground = colors.primary
Row(
modifier = Modifier
.height(22.dp)
.background(colors.primary.copy(alpha = if (colors.isDark) 0.2f else 0.1f), CircleShape)
.padding(start = 10.dp, end = 2.dp),
verticalAlignment = Alignment.CenterVertically,
) {
BasicText(text, style = Typography.xs.copy(color = foreground), maxLines = 1)
Box(
modifier = Modifier
.size(22.dp)
.clip(CircleShape)
.clickable(interactionSource = interaction, indication = null, enabled = enabled, role = Role.Button, onClick = onRemove)
.semantics { contentDescription = "Remove $text" }
.alpha(if (pressed) 1f else 0.5f),
contentAlignment = Alignment.Center,
) {
Icon(PhosphorIcons.Regular.X, contentDescription = null, size = 12.dp, tint = foreground)
}
}
}
@Composable
private fun ComboboxPopup(
expanded: Boolean,
onDismissRequest: () -> Unit,
items: List,
isSelected: (T) -> Boolean,
itemText: (T) -> String,
groupBy: ((T) -> String)?,
emptyText: String,
onItemClick: (T) -> Unit,
) {
val colors = EsuissTheme.colors
AnchoredPopup(
expanded = expanded,
onDismissRequest = onDismissRequest,
side = PopupSide.Bottom,
align = PopupAlign.Start,
sideOffset = 6.dp,
focusable = false,
) { placement ->
val width = with(LocalDensity.current) { placement.anchorWidth.toDp() }
Column(
modifier = Modifier
.width(width)
.raisedSurface(colors, RoundedCornerShape(Radius.xl))
.heightIn(max = 288.dp)
.verticalScroll(rememberScrollState())
.padding(6.dp),
) {
if (items.isEmpty()) {
BasicText(
emptyText,
modifier = Modifier.fillMaxWidth().padding(vertical = 8.dp),
style = Typography.sm.copy(color = colors.mutedForeground, textAlign = TextAlign.Center),
)
} else if (groupBy == null) {
items.forEach { ComboboxOption(itemText(it), isSelected(it)) { onItemClick(it) } }
} else {
items.groupBy(groupBy).entries.forEachIndexed { index, (label, group) ->
if (index > 0) {
MenuSeparatorLine(Modifier, bleed = 6.dp, color = colors.border)
}
BasicText(
label,
modifier = Modifier
.fillMaxWidth()
.semantics { heading() }
.padding(horizontal = 12.dp, vertical = 10.dp),
style = Typography.xs.copy(color = colors.mutedForeground, fontWeight = FontWeight.SemiBold),
)
group.forEach { ComboboxOption(itemText(it), isSelected(it)) { onItemClick(it) } }
}
}
}
}
}
@Composable
private fun ComboboxOption(text: String, selected: Boolean, onClick: () -> Unit) {
val colors = EsuissTheme.colors
val interaction = remember { MutableInteractionSource() }
val pressed by interaction.collectIsPressedAsState()
val shape = RoundedCornerShape(Radius.md)
Box(
modifier = Modifier
.fillMaxWidth()
.heightIn(min = 44.dp)
.clip(shape)
.alpha(if (pressed) 0.8f else 1f)
.toggleable(
value = selected,
interactionSource = interaction,
indication = null,
role = Role.Checkbox,
onValueChange = { onClick() },
)
.padding(start = 12.dp, end = 8.dp),
contentAlignment = Alignment.CenterStart,
) {
BasicText(
text,
modifier = Modifier.padding(end = 24.dp, top = 8.dp, bottom = 8.dp),
style = Typography.base.copy(color = colors.foreground),
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
if (selected) {
Icon(
PhosphorIcons.Regular.Check,
contentDescription = null,
modifier = Modifier.align(Alignment.CenterEnd),
size = 16.dp,
tint = colors.primary,
)
}
}
}
```
- `kotlin/components/Button.kt`: see [Button](https://ui.suiss.app/docs/components/button.md)
- `kotlin/components/ButtonGroup.kt`: see [Button Group](https://ui.suiss.app/docs/components/button-group.md)
- `kotlin/components/Checkbox.kt`: see [Checkbox](https://ui.suiss.app/docs/components/checkbox.md)
- `kotlin/components/Content.kt`: [source](https://github.com/e-suiss/ui/blob/main/packages/mobile/kotlin/ui/src/main/kotlin/com/esuiss/ui/components/Content.kt)
- `kotlin/components/DropdownMenu.kt`: see [Dropdown Menu](https://ui.suiss.app/docs/components/dropdown-menu.md)
- `kotlin/components/Field.kt`: see [Field](https://ui.suiss.app/docs/components/field.md)
- `kotlin/components/FormSupport.kt`: [source](https://github.com/e-suiss/ui/blob/main/packages/mobile/kotlin/ui/src/main/kotlin/com/esuiss/ui/components/FormSupport.kt)
- `kotlin/components/Haptics.kt`: see [Haptics](https://ui.suiss.app/docs/components/haptics.md)
- `kotlin/components/Icon.kt`: see [Icon](https://ui.suiss.app/docs/components/icon.md)
- `kotlin/components/Label.kt`: see [Label](https://ui.suiss.app/docs/components/label.md)
- `kotlin/components/Overlay.kt`: [source](https://github.com/e-suiss/ui/blob/main/packages/mobile/kotlin/ui/src/main/kotlin/com/esuiss/ui/components/Overlay.kt)
- `kotlin/components/Select.kt`: see [Select](https://ui.suiss.app/docs/components/select.md)
- `kotlin/components/Separator.kt`: see [Separator](https://ui.suiss.app/docs/components/separator.md)
4. Update the `com.esuiss.ui` package names to match your project.
## Usage
```tsx
import { ComboboxTrigger, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, ComboboxEmpty, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipsInput } from "@/components/ui/combobox"
```
```tsx
(defaultValue)
return (
No framework found.
{(item: string) => (
{item}
)}
)
}
export function ComboboxExample() {
return (
(defaultValue)
return (
No framework found.
{(item: string) => (
{item}
)}
)
}
export function ComboboxWithValueExample() {
return (
(defaultValue)
return (
No framework found.
{(item: string) => (
{item}
)}
)
}
export function ComboboxWithClearExample() {
return (
item.label}>
No produce found.
{(group: (typeof produce)[number], index: number) => (
{index > 0 ?
{group.value}
{(item: Produce) => (
{item.label}
)}
)}
)
}
export function ComboboxGroupedExample() {
return (
(null) }
Column {
Combobox(
items = ComboboxProduceItems,
value = ComboboxProduceItems.firstOrNull { it.value == value },
onValueChange = { value = it?.value },
modifier = Modifier.width(256.dp),
itemText = { it.label },
placeholder = "Select produce",
emptyText = "No produce found.",
groupBy = { it.group },
)
}
}
```
### Multiple
Multiple selection shown as removable chips.
```tsx
import * as React from "react"
import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxItem, ComboboxList, useComboboxAnchor } from "@/components/ui/combobox"
const frameworks = [
"Next.js",
"SvelteKit",
"Nuxt.js",
"Remix",
"Astro",
"Gatsby",
"Expo",
]
function MultipleDemo() {
const anchor = useComboboxAnchor()
const [value, setValue] = React.useState(["Expo", "Astro"])
return (
{value.map((item) => (
{item}
))}
No framework found.
{(item: string) => (
{item}
)}
)
}
export function ComboboxMultipleExample() {
return (
(defaultValue)
return (
No framework found.
{(item: string) => (
{item}
)}
)
}
export function ComboboxWithLabelExample() {
return (
Framework
Search and pick the framework you use.
)
}
```
```swift
import EsuissUI
import SwiftUI
struct ComboboxWithLabelExample: View {
var body: some View {
VStack(alignment: .leading, spacing: 8) {
FieldLabel("Framework")
.accessibilityHidden(true)
ComboboxDemo()
.accessibilityLabel(Text("Framework"))
Text("Search and pick the framework you use.")
.textStyle(.sm)
.foregroundStyle(EsuissColor.mutedForeground)
}
}
}
let comboboxFrameworks = [
"Next.js",
"SvelteKit",
"Nuxt.js",
"Remix",
"Astro",
"Gatsby",
"Expo",
]
struct ComboboxDemo: View {
@State private var value: String?
init(initial: String? = nil) {
_value = State(initialValue: initial)
}
var body: some View {
Combobox(
comboboxFrameworks,
selection: $value,
placeholder: "Select a framework",
emptyText: "No framework found."
)
.frame(width: 256)
}
}
```
```kotlin
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.Combobox
import com.esuiss.ui.components.Label
import com.esuiss.ui.components.Text
import com.esuiss.ui.theme.EsuissTheme
import com.esuiss.ui.theme.Typography
val ComboboxFrameworks = listOf("Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro", "Gatsby", "Expo")
@Composable
fun ComboboxDemo(
defaultValue: String? = null,
disabled: Boolean = false,
showClear: Boolean = false,
label: String? = null,
invalid: Boolean? = null,
) {
var value by rememberSaveable { mutableStateOf(defaultValue) }
Column {
Combobox(
items = ComboboxFrameworks,
value = value,
onValueChange = { value = it },
modifier = Modifier
.width(256.dp)
.then(if (label != null) Modifier.semantics { contentDescription = label } else Modifier),
placeholder = "Select a framework",
emptyText = "No framework found.",
showClear = showClear,
invalid = invalid,
enabled = !disabled,
)
}
}
@Composable
fun ComboboxWithLabel() {
Column(Modifier.fillMaxWidth(), verticalArrangement = Arrangement.spacedBy(8.dp)) {
Label("Framework")
ComboboxDemo(label = "Framework")
Text(
"Search and pick the framework you use.",
style = Typography.sm.copy(color = EsuissTheme.colors.mutedForeground),
)
}
}
```
### Disabled
A disabled combobox.
```tsx
import * as React from "react"
import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "@/components/ui/combobox"
const frameworks = [
"Next.js",
"SvelteKit",
"Nuxt.js",
"Remix",
"Astro",
"Gatsby",
"Expo",
]
function ComboboxDemo({
defaultValue = null,
defaultOpen,
disabled,
showClear,
labelledBy,
invalid,
}: {
defaultValue?: string | null
defaultOpen?: boolean
disabled?: boolean
showClear?: boolean
labelledBy?: string
invalid?: boolean
}) {
const [value, setValue] = React.useState(defaultValue)
return (
No framework found.
{(item: string) => (
{item}
)}
)
}
export function ComboboxDisabledExample() {
return (
(defaultValue)
return (
No framework found.
{(item: string) => (
{item}
)}
)
}
export function ComboboxInvalidExample() {
return (
Please select a framework.
)
}
```
```swift
import EsuissUI
import SwiftUI
struct ComboboxInvalidExample: View {
var body: some View {
VStack(alignment: .leading, spacing: 8) {
ComboboxDemo()
.invalid()
Text("Please select a framework.")
.textStyle(.sm)
.foregroundStyle(EsuissColor.destructive)
}
}
}
let comboboxFrameworks = [
"Next.js",
"SvelteKit",
"Nuxt.js",
"Remix",
"Astro",
"Gatsby",
"Expo",
]
struct ComboboxDemo: View {
@State private var value: String?
init(initial: String? = nil) {
_value = State(initialValue: initial)
}
var body: some View {
Combobox(
comboboxFrameworks,
selection: $value,
placeholder: "Select a framework",
emptyText: "No framework found."
)
.frame(width: 256)
}
}
```
```kotlin
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.Combobox
import com.esuiss.ui.components.Text
import com.esuiss.ui.theme.EsuissTheme
import com.esuiss.ui.theme.Typography
val ComboboxFrameworks = listOf("Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro", "Gatsby", "Expo")
@Composable
fun ComboboxDemo(
defaultValue: String? = null,
disabled: Boolean = false,
showClear: Boolean = false,
label: String? = null,
invalid: Boolean? = null,
) {
var value by rememberSaveable { mutableStateOf(defaultValue) }
Column {
Combobox(
items = ComboboxFrameworks,
value = value,
onValueChange = { value = it },
modifier = Modifier
.width(256.dp)
.then(if (label != null) Modifier.semantics { contentDescription = label } else Modifier),
placeholder = "Select a framework",
emptyText = "No framework found.",
showClear = showClear,
invalid = invalid,
enabled = !disabled,
)
}
}
@Composable
fun ComboboxInvalid() {
Column(Modifier.fillMaxWidth(), verticalArrangement = Arrangement.spacedBy(8.dp)) {
ComboboxDemo(invalid = true)
Text("Please select a framework.", style = Typography.sm.copy(color = EsuissTheme.colors.destructive))
}
}
```
## API Reference
### Combobox
The root that holds the items, the selected value, the typed text and the open state.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `Item[] \| ComboboxItemGroup- []` | - | The items to filter, flat or grouped. |
| `value` | `Value \| Value[] \| null` | - | The selected value, for controlled use. |
| `defaultValue` | `Value \| Value[] \| null` | - | The initial value when uncontrolled. |
| `onValueChange` | `(value, details) => void` | - | Called when the selection changes. |
| `multiple` | `boolean` | `false` | Allows several values to be selected. |
| `inputValue` | `string` | - | The typed text, for controlled use. |
| `onInputValueChange` | `(inputValue: string, details) => void` | - | Called when the typed text changes. |
| `filter` | `ComboboxFilter
- \| null` | - | Custom filter function; `null` turns filtering off. |
| `limit` | `number` | - | The maximum number of items shown. |
| `itemToStringLabel` | `(itemValue: Value) => string` | - | Returns the label shown for an item value. |
| `openOnInputClick` | `boolean` | `true` | Opens the list when the input is pressed. |
| `open` | `boolean` | - | Whether the list is open, for controlled use. |
| `defaultOpen` | `boolean` | `false` | Whether the list starts open when uncontrolled. |
| `onOpenChange` | `(open: boolean, details) => void` | - | Called when the list opens or closes. |
| `disabled` | `boolean` | `false` | Disables the combobox. |
| `readOnly` | `boolean` | `false` | Shows the value without allowing changes. |
### ComboboxTrigger
Round button that opens the list.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `React.ReactNode` | - | |
Also accepts the props of `React.ComponentProps
`.
### ComboboxInput
Text field with caret trigger and optional clear button.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string` | - | |
| `children` | `React.ReactNode` | - | |
| `showTrigger` | `boolean` | `true` | Shows the caret button. Defaults to `true`. |
| `showClear` | `boolean` | `false` | Shows a clear button when there is text or a value. |
| `invalid` | `boolean` | - | Shows the destructive border; also read from a surrounding Field. |
Also accepts the props of `React.ComponentProps`.
### ComboboxContent
Floating popup for the list.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `portalHost` | `string` | - | Name of the portal host to render into. |
Also accepts the props of `React.ComponentProps`, `PositionerProps`.
### ComboboxList
Scrollable list of items.
Also accepts the props of `React.ComponentProps`.
### ComboboxItem
Selectable option with a check mark when selected.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `React.ReactNode` | - | |
Also accepts the props of `React.ComponentProps`.
### ComboboxGroup
Group of items.
Also accepts the props of `React.ComponentProps`.
### ComboboxLabel
Heading for a group.
Also accepts the props of `React.ComponentProps`.
### ComboboxEmpty
Message shown when nothing matches.
Also accepts the props of `React.ComponentProps`.
### ComboboxSeparator
Line between groups.
Also accepts the props of `React.ComponentProps`.
### ComboboxChips
Field that holds chips for multiple selection.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `invalid` | `boolean` | - | Shows the destructive border. |
Also accepts the props of `React.ComponentProps`.
### ComboboxChip
Selected value with a remove button.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `showRemove` | `boolean` | `true` | Shows the remove button. Defaults to `true`. |
| `removeLabel` | `string` | `Remove {value}` | Accessible name of the remove button. Defaults to `Remove` followed by the chip text. |
Also accepts the props of `React.ComponentProps`.
### ComboboxChipsInput
Text input inside the chips field.
Also accepts the props of `React.ComponentProps`.
## Accessibility
- The input has the `combobox` role with `expanded` and `disabled` state.
- Items have the `option` role with `selected` and `disabled` state; the list has the `list` role.
- The empty message is a polite live region.
- The trigger, clear and chip remove buttons are labelled "Show options", "Clear" and "Remove".
## Notes
- Uses `bg-secondary`, `bg-popover`, `border-ring` and `border-destructive` tokens; light and dark follow the system appearance.
- In Uniwind and NativeWind, a focused field also draws the `ring-3 ring-ring/50` focus ring.
- Fade animations respect the system Reduce Motion setting.