nili/ui
enfaartr
All components

Dropdown

Overview
13 exports7 variant axes36 props4 files
import { Dropdown, DropdownOption } from '@nili/ui';

This is the library’s own overview page, rendered live. Switch the language or the theme in the header and it follows.

Types

The four leading-slot patterns from the Figma overview. There is no type prop — pass any node through startAdornment. Each example includes the optional sublabel, information glyph, and hint.

Icon

This is a hint text to help user.

Country

This is a hint text to help user.

User

This is a hint text to help user.

Company

This is a hint text to help user.

import {
  Dropdown,
  Icon,
  Avatar,
  CountryFlag,
  PlaceholderLogo,
} from "@nili/ui"
import { RiFlashlightLine } from "@remixicon/react"

// Icon
const iconOptions = [
  {
    value: "design",
    label: "Design",
    startAdornment: <Icon icon={RiFlashlightLine} />,
  },
]

// Country
const countryOptions = [
  {
    value: "ir",
    label: "Iran",
    startAdornment: <CountryFlag code="ir" size="sm" />,
  },
]

// User
const userOptions = [
  {
    value: "sophia",
    label: "Sophia Williams",
    description: "Product design",
    startAdornment: <Avatar size="3xs" name="Sophia Williams" />,
  },
]

// Company
const companyOptions = [
  {
    value: "apex",
    label: "Apex Financial",
    description: "Finance & Banking",
    startAdornment: (
      <PlaceholderLogo company="apex-financial" size="xs" label="" />
    ),
  },
]

export function Example() {
  return (
    <Dropdown
      label="Label"
      sublabel="(Optional)"
      information
      hint="This is a hint text to help user."
      placeholder="Select…"
      options={iconOptions}
    />
  )
}

Sizes

Medium (40px) is the default. Small and X-Small match the Text Input scale.

import { Dropdown } from "@nili/ui"

export function Example() {
  return (
    <>
      <Dropdown size="md" label="Medium" options={options} />
      <Dropdown size="sm" label="Small" options={options} />
      <Dropdown size="xs" label="X-Small" options={options} />
    </>
  )
}

Appearances

Default is the full field. Compact drops the border for denser toolbars. Inline is text-only.

default
compact
inline
import { Dropdown } from "@nili/ui"

export function Example() {
  return (
    <>
      <Dropdown appearance="default" options={options} />
      <Dropdown appearance="compact" options={options} />
      <Dropdown appearance="inline" options={options} />
    </>
  )
}

Searchable

Turn on searchable for long lists. The search field stays focused while the list is navigated with the keyboard.

import { Dropdown, Avatar } from "@nili/ui"

export function Example() {
  return (
    <Dropdown
      label="Assignee"
      placeholder="Search people…"
      options={userOptions}
      itemSize="lg"
      searchable
      searchPlaceholder="Search people…"
    />
  )
}

Disabled & error

Pass error to show a validation message; the field is marked invalid automatically. Disabled is a real disabled attribute.

import { Dropdown } from "@nili/ui"

export function Example() {
  return (
    <>
      <Dropdown disabled label="Disabled" options={options} />
      <Dropdown
        label="Required field"
        options={options}
        error="Please select an option"
      />
    </>
  )
}