Headless UI

https://headlessui.com
Admin
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind...
Tokens:89,885
Snippets:554
Trust Score:9.5
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Install Headless UI React via npm

Source: https://headlessui.com/react/input

Install the Headless UI React package using npm. This is the required first step before using any components.

```bash
npm install @headlessui/react
```

--------------------------------

### Basic Select component example

Source: https://headlessui.com/react/select

A minimal example of the Select component with options. Pass any props you would to a native select element.

```jsx
import { Select } from '@headlessui/react'

function Example() {
  return (
    <Select name="status" aria-label="Project status">
      <option value="active">Active</option>
      <option value="paused">Paused</option>
      <option value="delayed">Delayed</option>
      <option value="canceled">Canceled</option>
    </Select>
  )
}
```

--------------------------------

### Basic Radio Group example

Source: https://headlessui.com/react/radio-group

A basic example using RadioGroup, Radio, Field, and Label components with a state hook to manage the selected plan.

```jsx
import { Field, Label, Radio, RadioGroup } from '@headlessui/react'
import { useState } from 'react'

const plans = ['Startup', 'Business', 'Enterprise']

function Example() {
  let [selected, setSelected] = useState(plans[0])

  return (
    <RadioGroup value={selected} onChange={setSelected} aria-label="Server size">
      {plans.map((plan) => (
        <Field key={plan} className="flex items-center gap-2">
          <Radio
            value={plan}
            className="group flex size-5 items-center justify-center rounded-full border bg-white data-checked:bg-blue-400"
          >
            <span className="invisible size-2 rounded-full bg-white group-data-checked:visible" />
          </Radio>
          <Label>{plan}</Label>
        </Field>
      ))}
    </RadioGroup>
  )
}
```

--------------------------------

### Basic Dialog Example

Source: https://headlessui.com/react/dialog

A basic dialog example using Dialog, DialogPanel, DialogTitle, and Description components. The dialog is controlled by the open prop and onClose callback, which is required for dismissal via Esc key or clicking outside.

```jsx
import { Description, Dialog, DialogPanel, DialogTitle } from '@headlessui/react'
import { useState } from 'react'

function Example() {
  let [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open dialog</button>
      <Dialog open={isOpen} onClose={() => setIsOpen(false)} className="relative z-50">
        <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
          <DialogPanel className="max-w-lg space-y-4 border bg-white p-12">
            <DialogTitle className="font-bold">Deactivate account</DialogTitle>
            <Description>This will permanently deactivate your account</Description>
            <p>Are you sure you want to deactivate your account? All of your data will be permanently removed.</p>
            <div className="flex gap-4">
              <button onClick={() => setIsOpen(false)}>Cancel</button>
              <button onClick={() => setIsOpen(false)}>Deactivate</button>
            </div>
          </DialogPanel>
        </div>
      </Dialog>
    </>
  )
}
```

--------------------------------

### Basic Button example

Source: https://headlessui.com/react/button

Basic usage of the Button component with Tailwind CSS classes for styling.

```jsx
import { Button } from '@headlessui/react'

function Example() {
  return (
    <Button className="rounded bg-sky-600 px-4 py-2 text-sm text-white data-active:bg-sky-700 data-hover:bg-sky-500">
      Save changes
    </Button>
  )
}

```

--------------------------------

### Basic Switch with onChange

Source: https://headlessui.com/react/switch

Basic Switch example. Toggling calls onChange with the negated checked value. Click or press spacebar to toggle.

```jsx
import { Switch } from '@headlessui/react'
import { useState } from 'react'

function Example() {
  const [enabled, setEnabled] = useState(false)

  return (
    <Switch
      checked={enabled}
      onChange={setEnabled}
      className="group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 transition data-checked:bg-blue-600"
    >
      <span className="size-4 translate-x-1 rounded-full bg-white transition group-data-checked:translate-x-6" />
    </Switch>
  )
}
```

--------------------------------

### Basic Combobox example with filtering

Source: https://headlessui.com/react/combobox

A complete React example using Combobox, ComboboxInput, ComboboxOptions, and ComboboxOption. It filters a list of people based on the query state and uses displayValue to show the selected person's name.

```jsx
import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions } from '@headlessui/react'
import { useState } from 'react'

const people = [
  { id: 1, name: 'Durward Reynolds' },
  { id: 2, name: 'Kenton Towne' },
  { id: 3, name: 'Therese Wunsch' },
  { id: 4, name: 'Benedict Kessler' },
  { id: 5, name: 'Katelyn Rohan' },
]

function Example() {
  const [selectedPerson, setSelectedPerson] = useState(people[0])
  const [query, setQuery] = useState('')

  const filteredPeople =
    query === ''
      ? people
      : people.filter((person) => {
          return person.name.toLowerCase().includes(query.toLowerCase())
        })

  return (
    <Combobox value={selectedPerson} onChange={setSelectedPerson} onClose={() => setQuery('')}>
      <ComboboxInput
        aria-label="Assignee"
        displayValue={(person) => person?.name}
        onChange={(event) => setQuery(event.target.value)}
      />
      <ComboboxOptions anchor="bottom" className="border empty:invisible">
        {filteredPeople.map((person) => (
          <ComboboxOption key={person.id} value={person} className="data-focus:bg-blue-100">
            {person.name}
          </ComboboxOption>
        ))}
      </ComboboxOptions>
    </Combobox>
  )
}
```

--------------------------------

### Basic Dropdown Menu Example

Source: https://headlessui.com/react/menu

A basic menu using Menu, MenuButton, MenuItems, and MenuItem components. The MenuButton toggles the menu, and items are navigable via keyboard.

```jsx
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'

function Example() {
  return (
    <Menu>
      <MenuButton>My account</MenuButton>
      <MenuItems anchor="bottom">
        <MenuItem>
          <a className="block data-focus:bg-blue-100" href="/settings">
            Settings
          </a>
        </MenuItem>
        <MenuItem>
          <a className="block data-focus:bg-blue-100" href="/support">
            Support
          </a>
        </MenuItem>
        <MenuItem>
          <a className="block data-focus:bg-blue-100" href="/license">
            License
          </a>
        </MenuItem>
      </MenuItems>
    </Menu>
  )
}
```

--------------------------------

### Basic Tabs example with TabGroup, TabList, Tab, TabPanels, TabPanel

Source: https://headlessui.com/react/tabs

Shows the minimal structure for a tab interface. The first tab is selected by default; clicking or keyboard selection activates the corresponding panel.

```jsx
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'

function Example() {
  return (
    <TabGroup>
      <TabList>
        <Tab>Tab 1</Tab>
        <Tab>Tab 2</Tab>
        <Tab>Tab 3</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>Content 1</TabPanel>
        <TabPanel>Content 2</TabPanel>
        <TabPanel>Content 3</TabPanel>
      </TabPanels>
    </TabGroup>
  )
}
```

--------------------------------

### Basic Popover example with PopoverButton and PopoverPanel

Source: https://headlessui.com/react/popover

A minimal Popover with a button that toggles a panel. Clicking outside, pressing Escape, or tabbing away closes the panel.

```jsx
import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'

function Example() {
  return (
    <Popover className="relative">
      <PopoverButton>Solutions</PopoverButton>
      <PopoverPanel anchor="bottom" className="flex flex-col">
        <a href="/analytics">Analytics</a>
        <a href="/engagement">Engagement</a>
        <a href="/security">Security</a>
        <a href="/integrations">Integrations</a>
      </PopoverPanel>
    </Popover>
  )
}
```

--------------------------------

### Buttonless Listbox API usage example

Source: https://headlessui.com/react/listbox

Shows the desired API for a custom listbox component that includes the button by default, so the ListboxButton is not required each time.

```jsx
<MyListbox name="status">
  <MyListboxOption value="active">Active</MyListboxOption>
  <MyListboxOption value="paused">Paused</MyListboxOption>
  <MyListboxOption value="delayed">Delayed</MyListboxOption>
  <MyListboxOption value="canceled">Canceled</MyListboxOption>
</MyListbox>
```

--------------------------------

### Listen for tab changes with onChange

Source: https://headlessui.com/react/tabs

Use the `onChange` prop on `TabGroup` to run a function whenever the selected tab changes. The example logs the new index to the console.

```jsx
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'

function Example() {
  return (
    <TabGroup

      onChange={(index) => {
        console.log('Changed selected tab to:', index)
      }}
    >
      <TabList>
        <Tab>Tab 1</Tab>
        <Tab>Tab 2</Tab>
        <Tab>Tab 3</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>Content 1</TabPanel>
        <TabPanel>Content 2</TabPanel>
        <TabPanel>Content 3</TabPanel>
      </TabPanels>
    </TabGroup>
  )
}

```

--------------------------------

### Basic Listbox example in React

Source: https://headlessui.com/react/listbox

A basic Listbox using Listbox, ListboxButton, ListboxOptions, and ListboxOption. The button toggles the options, and the list is keyboard navigable. Uses useState to manage the selected person.

```jsx
import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/react'
import { useState } from 'react'

const people = [
  { id: 1, name: 'Durward Reynolds' },
  { id: 2, name: 'Kenton Towne' },
  { id: 3, name: 'Therese Wunsch' },
  { id: 4, name: 'Benedict Kessler' },
  { id: 5, name: 'Katelyn Rohan' },
]

function Example() {
  const [selectedPerson, setSelectedPerson] = useState(people[0])

  return (
    <Listbox value={selectedPerson} onChange={setSelectedPerson}>
      <ListboxButton>{selectedPerson.name}</ListboxButton>
      <ListboxOptions anchor="bottom">
        {people.map((person) => (
          <ListboxOption key={person.id} value={person} className="data-focus:bg-blue-100">
            {person.name}
          </ListboxOption>
        ))}
      </ListboxOptions>
    </Listbox>
  )
}
```

--------------------------------

### Basic Transition example with show prop and data-closed attribute

Source: https://headlessui.com/react/transition

Wrap a conditionally rendered element in the Transition component, using the `show` prop to control visibility. Apply CSS transition styles and target the `data-closed` attribute for the closed state.

```jsx
import { Transition } from '@headlessui/react'
import { useState } from 'react'

function Example() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <button onClick={() => setOpen((open) => !open)}>Toggle</button>
      <Transition show={open}>
        <div className="transition duration-300 ease-in data-closed:opacity-0">I will fade in and out</div>
      </Transition>
    </>
  )
}
```

--------------------------------

### Basic Checkbox example with onChange

Source: https://headlessui.com/react/checkbox

A minimal Checkbox component that toggles its checked state and calls onChange with the new value. Clicking or pressing spacebar toggles the checkbox.

```jsx
import { Checkbox } from '@headlessui/react'
import { useState } from 'react'

function Example() {
  const [enabled, setEnabled] = useState(false)

  return (
    <Checkbox
      checked={enabled}
      onChange={setEnabled}
      className="group block size-4 rounded border bg-white data-checked:bg-blue-500"
    >
      {/* Checkmark icon */}
      <svg className="stroke-white opacity-0 group-data-checked:opacity-100" viewBox="0 0 14 14" fill="none">
        <path d="M3 8L6 11L11 3.5" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </Checkbox>
  )
}
```

--------------------------------

### Opening the dropdown on focus with Combobox immediate prop

Source: https://headlessui.com/react/combobox

Use the `immediate` prop to open the combobox options as soon as the input receives focus. The example includes a `displayValue` on the input to show the selected person's name.

```jsx
import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions } from '@headlessui/react'
import { useState } from 'react'

const people = [
  { id: 1, name: 'Durward Reynolds' },
  { id: 2, name: 'Kenton Towne' },
  { id: 3, name: 'Therese Wunsch' },
  { id: 4, name: 'Benedict Kessler' },
  { id: 5, name: 'Katelyn Rohan' },
]

function Example() {
  const [selectedPerson, setSelectedPerson] = useState(people[0])
  const [query, setQuery] = useState('')

  const filteredPeople =
    query === ''
      ? people
      : people.filter((person) => {
          return person.name.toLowerCase().includes(query.toLowerCase())
        })

  return (

    <Combobox immediate value={selectedPerson} onChange={setSelectedPerson} onClose={() => setQuery('')}>
      <ComboboxInput
        aria-label="Assignee"
        displayValue={(person) => person?.name}
        onChange={(event) => setQuery(event.target.value)}
      />
      <ComboboxOptions anchor="bottom" className="border empty:invisible">
        {filteredPeople.map((person) => (
          <ComboboxOption key={person.id} value={person} className="data-focus:bg-blue-100">
            {person.name}
          </ComboboxOption>
        ))}
      </ComboboxOptions>
    </Combobox>
  )
}

```

--------------------------------

### Different enter/leave transitions with data-enter and data-leave

Source: https://headlessui.com/react/transition

Use the `data-enter` and `data-leave` attributes to apply different transition styles when entering and leaving. Combines `data-enter` with `data-closed` for the starting point and `data-leave` with `data-closed` for the ending point, and sets different durations for enter and leave.

```jsx
import { Transition } from '@headlessui/react'
import clsx from 'clsx'
import { useState } from 'react'

function Example() {
  const [open, setOpen] = useState(false)

  return (
    <div className="relative">
      <button onClick={() => setOpen((open) => !open)}>Toggle</button>
      <Transition show={open}>
        <div
          className={clsx([
            // Base styles
            'absolute w-48 border transition ease-in-out',
            // Shared closed styles
            'data-closed:opacity-0',
            // Entering styles
            'data-enter:duration-100 data-enter:data-closed:-translate-x-full',
            // Leaving styles
            'data-leave:duration-300 data-leave:data-closed:translate-x-full',
          ])}
        >
          I will enter from the left and leave to the right
        </div>
      </Transition>
    </div>
  )
}
```

--------------------------------

### Showing and hiding with open and onClose

Source: https://headlessui.com/react/dialog

Controlled dialog example. Manage the open state with `open` and `onClose` props; `onClose` is called when the user presses Esc or clicks outside the DialogPanel. Set `open` to `false` to close.

```jsx
import { Description, Dialog, DialogPanel, DialogTitle } from '@headlessui/react'
import { useState } from 'react'

function Example() {
  // The open/closed state lives outside of the `Dialog` and is managed by you

  let [isOpen, setIsOpen] = useState(true)

  function async handleDeactivate() {
    await fetch('/deactivate-account', { method: 'POST' })

    setIsOpen(false)
  }

  return (
    /*
      Pass `isOpen` to the `open` prop, and use `onClose` to set
      the state back to `false` when the user clicks outside of
      the dialog or presses the escape key.
    */

    <Dialog open={isOpen} onClose={() => setIsOpen(false)}>
      <DialogPanel>
        <DialogTitle>Deactivate account</DialogTitle>
        <Description>This will permanently deactivate your account</Description>
        <p>Are you sure you want to deactivate your account? All of your data will be permanently removed.</p>

        {/*
          You can render additional buttons to dismiss your
          dialog by setting `isOpen` to `false`.
        */}
        <button onClick={() => setIsOpen(false)}>Cancel</button>
        <button onClick={handleDeactivate}>Deactivate</button>
      </DialogPanel>

    </Dialog>
  )
}

```

--------------------------------

### Adding CSS transitions to MenuItems with transition prop

Source: https://headlessui.com/react/menu

Use the `transition` prop on `MenuItems` to enable CSS transitions. The example uses Tailwind CSS classes to animate opacity and scale on open/close, with `data-closed` variants for the closed state.

```jsx
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'

function Example() {
  return (
    <Menu>
      <MenuButton>My account</MenuButton>
      <MenuItems
        anchor="bottom"

        transition
        className="origin-top transition duration-200 ease-out data-closed:scale-95 data-closed:opacity-0"
      >
        <MenuItem>
          <a className="block data-focus:bg-blue-100" href="/settings">
            Settings
          </a>
        </MenuItem>
        <MenuItem>
          <a className="block data-focus:bg-blue-100" href="/support">
            Support
          </a>
        </MenuItem>
        <MenuItem>
          <a className="block data-focus:bg-blue-100" href="/license">
            License
          </a>
        </MenuItem>
      </MenuItems>
    </Menu>
  )
}

```

--------------------------------

### Render Checkbox as a div with custom styling

Source: https://headlessui.com/react/checkbox

Use the `as` prop to render the Checkbox as a `div` instead of the default `span`. The example includes a custom SVG checkmark and uses `data-checked` and `group-data-checked` for styling.

```jsx
import { Checkbox } from '@headlessui/react'
import { useState } from 'react'

function Example() {
  const [enabled, setEnabled] = useState(false)

  return (
    <Checkbox

      as="div"
      checked={enabled}
      onChange={setEnabled}
      className="group block size-4 rounded border bg-white data-checked:bg-blue-500"
    >
      <svg className="stroke-white opacity-0 group-data-checked:opacity-100" viewBox="0 0 14 14" fill="none">
        <path d="M3 8L6 11L11 3.5" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </Checkbox>
  )
}

```

--------------------------------

### Control dropdown gap with anchor object API

Source: https://headlessui.com/react/listbox

Use the anchor prop with an object to control gap, offset, and padding values using JavaScript. The example sets the dropdown to 'bottom start' with a 4px gap.

```jsx
import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/react'
import { useState } from 'react'

const people = [
  { id: 1, name: 'Durward Reynolds' },
  { id: 2, name: 'Kenton Towne' },
  { id: 3, name: 'Therese Wunsch' },
  { id: 4, name: 'Benedict Kessler' },
  { id: 5, name: 'Katelyn Rohan' },
]

function Example() {
  const [selectedPerson, setSelectedPerson] = useState(people[0])

  return (
    <Listbox value={selectedPerson} onChange={setSelectedPerson}>
      <ListboxButton>{selectedPerson.name}</ListboxButton>

      <ListboxOptions anchor={{ to: 'bottom start', gap: '4px' }}>
        {people.map((person) => (
          <ListboxOption key={person.id} value={person} className="data-focus:bg-blue-100">
            {person.name}
          </ListboxOption>
        ))}
      </ListboxOptions>
    </Listbox>
  )
}

```

--------------------------------

### Transitioning on initial mount with appear prop

Source: https://headlessui.com/react/transition

Set the `appear` prop to `true` to transition an element on its initial mount, useful for initial page load or when the parent is conditionally rendered.

```jsx
import { Transition } from '@headlessui/react'
import { useState } from 'react'

function Example() {
  const [open, setOpen] = useState(true)

  return (
    <>
      <button onClick={() => setOpen((open) => !open)}>Toggle</button>

      <Transition show={open} appear={true}>
        <div className="transition duration-300 ease-in data-closed:opacity-0">I will fade in on initial render</div>
      </Transition>
    </>
  )
}
```

--------------------------------

### Basic Disclosure Example

Source: https://headlessui.com/react/disclosure

A minimal Disclosure using DisclosureButton and DisclosurePanel. The button toggles the panel and components receive aria-* attributes like aria-expanded and aria-controls.

```jsx
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react'

function Example() {
  return (
    <Disclosure>
      <DisclosureButton className="py-2">Is team pricing available?</DisclosureButton>
      <DisclosurePanel className="text-gray-500">
        Yes! You can purchase a license that you can share with your entire team.
      </DisclosurePanel>
    </Disclosure>
  )
}
```

--------------------------------

### Render MenuButton and MenuItems as custom elements with the `as` prop

Source: https://headlessui.com/react/menu

Use the `as` prop to render `MenuButton` as a custom component (`MyCustomButton`) and `MenuItems` as a `section` element. Custom components must forward refs so Headless UI can wire things up correctly.

```jsx
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
import { forwardRef } from 'react'


let MyCustomButton = forwardRef(function (props, ref) {
  return <button className="..." ref={ref} {...props} />
})

function Example() {
  return (
    <Menu>

      <MenuButton as={MyCustomButton}>My account</MenuButton>
      <MenuItems anchor="bottom" as="section">
        <MenuItem as="a" className="block data-focus:bg-blue-100" href="/settings">
          Settings
        </MenuItem>

        <MenuItem as="a" className="block data-focus:bg-blue-100" href="/support">
          Support
        </MenuItem>

        <MenuItem as="a" className="block data-focus:bg-blue-100" href="/license">
          License
        </MenuItem>
      </MenuItems>
    </Menu>
  )
}

```

--------------------------------

### Disabling a ComboboxOption with the disabled prop

Source: https://headlessui.com/react/combobox

Use the `disabled` prop on a `ComboboxOption` to prevent it from being selected. In this example, options with `available: false` are disabled and styled with `data-disabled:opacity-50`.

```tsx
import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions } from '@headlessui/react'
import { useState } from 'react'

const people = [
  { id: 1, name: 'Durward Reynolds', available: true },
  { id: 2, name: 'Kenton Towne', available: true },
  { id: 3, name: 'Therese Wunsch', available: true },

  { id: 4, name: 'Benedict Kessler', available: false },
  { id: 5, name: 'Katelyn Rohan', available: true },
]

function Example() {
  const [selectedPerson, setSelectedPerson] = useState(people[0])
  const [query, setQuery] = useState('')

  const filteredPeople =
    query === ''
      ? people
      : people.filter((person) => {
          return person.name.toLowerCase().includes(query.toLowerCase())
        })

  return (
    <Combobox value={selectedPerson} onChange={setSelectedPerson} onClose={() => setQuery('')}>
      <ComboboxInput
        aria-label="Assignee"
        displayValue={(person) => person?.name}
        onChange={(event) => setQuery(event.target.value)}
      />
      <ComboboxOptions anchor="bottom" className="border empty:invisible">
        {filteredPeople.map((person) => (
          <ComboboxOption
            key={person.id}
            value={person}

            disabled={!person.available}
            className="data-disabled:opacity-50 data-focus:bg-blue-100"
          >
            {person.name}
          </ComboboxOption>
        ))}
      </ComboboxOptions>
    </Combobox>
  )
}

```

--------------------------------

### Grouping items with MenuSection and MenuHeading

Source: https://headlessui.com/react/menu

Demonstrates using MenuSection, MenuHeading, and MenuSeparator to group items into labeled sections. Each section has a heading and its own set of menu items.

```jsx
import { Menu, MenuButton, MenuHeading, MenuItem, MenuItems, MenuSection, MenuSeparator } from '@headlessui/react'

function Example() {
  return (
    <Menu>
      <MenuButton>My account</MenuButton>
      <MenuItems anchor="bottom">

        <MenuSection>
          <MenuHeading className="text-sm opacity-50">Settings</MenuHeading>
          <MenuItem>
            <a className="block data-focus:bg-blue-100" href="/profile">
              My profile
            </a>
          </MenuItem>
          <MenuItem>
            <a className="block data-focus:bg-blue-100" href="/notifications">
              Notifications
            </a>
          </MenuItem>

        </MenuSection>
        <MenuSeparator className="my-1 h-px bg-black" />
        <MenuSection>
          <MenuHeading className="text-sm opacity-50">Support</MenuHeading>
          <MenuItem>
            <a className="block data-focus:bg-blue-100" href="/support">
              Documentation
            </a>
          </MenuItem>
          <MenuItem>
            <a className="block data-focus:bg-blue-100" href="/license">
              License
            </a>
          </MenuItem>

        </MenuSection>
      </MenuItems>
    </Menu>
  )
}

```

--------------------------------

### Basic Input component usage

Source: https://headlessui.com/react/input

Import the Input component from @headlessui/react and render it with a name and type prop. You can pass any native input props.

```jsx
import { Input } from '@headlessui/react'

function Example() {
  return <Input name="full_name" type="text" />
}
```

--------------------------------

### Disable a Tab with the disabled prop

Source: https://headlessui.com/react/tabs

Use the `disabled` prop on a `Tab` to prevent it from being selected. The example applies a `disabled:opacity-50` class to visually indicate the disabled state.

```jsx
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'

function Example() {
  return (
    <TabGroup>
      <TabList>
        <Tab>Tab 1</Tab>

        <Tab disabled className="disabled:opacity-50">
          Tab 2
        </Tab>
        <Tab>Tab 3</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>Content 1</TabPanel>
        <TabPanel>Content 2</TabPanel>
        <TabPanel>Content 3</TabPanel>
      </TabPanels>
    </TabGroup>
  )
}

```

--------------------------------

### Styling Textarea with render props

Source: https://headlessui.com/react/textarea

Use the focus and hover render props to conditionally apply styles. The example uses clsx and Fragment to render a custom textarea element.

```jsx
import { Textarea } from '@headlessui/react'
import clsx from 'clsx'
import { Fragment } from 'react'

function Example() {
  return (
    <Textarea name="description" as={Fragment}>

      {({ focus, hover }) => (
        <textarea className={clsx('border', focus && 'bg-blue-100', hover && 'shadow')}></textarea>
      )}
    </Textarea>
  )
}
```

--------------------------------

### Position dropdown with anchor prop

Source: https://headlessui.com/react/menu

Adds the anchor prop to MenuItems to automatically position the dropdown relative to the MenuButton. Use values like 'bottom start' to align to a corner.

```jsx
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'

function Example() {
  return (
    <Menu>
      <MenuButton>My account</MenuButton>

      <MenuItems anchor="bottom start">
        <MenuItem>
          <a className="block data-focus:bg-blue-100" href="/settings">
            Settings
          </a>
        </MenuItem>
        <MenuItem>
          <a className="block data-focus:bg-blue-100" href="/support">
            Support
          </a>
        </MenuItem>
        <MenuItem>
          <a className="block data-focus:bg-blue-100" href="/license">
            License
          </a>
        </MenuItem>
      </MenuItems>
    </Menu>
  )
}

```

--------------------------------

### Render Tab components as custom elements with `as` prop

Source: https://headlessui.com/react/tabs

Use the `as` prop to render `TabGroup`, `TabList`, `Tab`, `TabPanels`, and `TabPanel` as different elements or custom components. Custom components must forward refs for Headless UI to work correctly.

```jsx
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
import { forwardRef } from 'react'


let MyCustomButton = forwardRef(function (props, ref) {
  return <button className="..." ref={ref} {...props} />
})

function Example() {
  return (
    <TabGroup>

      <TabList as="aside">
        <Tab as={MyCustomButton}>Tab 1</Tab>
        <Tab as={MyCustomButton}>Tab 2</Tab>
        <Tab as={MyCustomButton}>Tab 3</Tab>
      </TabList>

      <TabPanels as="section">
        <TabPanel>Content 1</TabPanel>
        <TabPanel>Content 2</TabPanel>
        <TabPanel>Content 3</TabPanel>
      </TabPanels>
    </TabGroup>
  )
}

```

--------------------------------

### Animate the panel with the transition prop

Source: https://headlessui.com/react/popover

Add the transition prop to PopoverPanel and use CSS classes to animate opening and closing. The example uses data-closed:scale-95 and data-closed:opacity-0 for the closed state.

```jsx
import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'

function Example() {
  return (
    <Popover>
      <PopoverButton>Solutions</PopoverButton>
      <PopoverPanel
        anchor="bottom"

        transition
        className="flex origin-top flex-col transition duration-200 ease-out data-closed:scale-95 data-closed:opacity-0"
      >
        <a href="/analytics">Analytics</a>
        <a href="/engagement">Engagement</a>
        <a href="/security">Security</a>
        <a href="/integrations">Integrations</a>
      </PopoverPanel>
    </Popover>
  )
}

```

--------------------------------

### Disabling a Listbox with Field disabled prop

Source: https://headlessui.com/react/listbox

Add the disabled prop to the Field component to disable a Listbox and its associated Label and Description. The example shows a Field with disabled prop, and the Listbox is inside it.

```jsx
import { Description, Field, Label, Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/react'
import { useState } from 'react'

const people = [
  { id: 1, name: 'Durward Reynolds' },
  { id: 2, name: 'Kenton Towne' },
  { id: 3, name: 'Therese Wunsch' },
  { id: 4, name: 'Benedict Kessler' },
  { id: 5, name: 'Katelyn Rohan' },
]

function Example() {
  const [selectedPerson, setSelectedPerson] = useState(people[0])

  return (

    <Field disabled>
      <Label>Assignee:</Label>
      <Description>This person will have full access to this project.</Description>
      <Listbox value={selectedPerson} onChange={setSelectedPerson}>
        <ListboxButton>{selectedPerson.name}</ListboxButton>
        <ListboxOptions anchor="bottom">
          {people.map((person) => (
            <ListboxOption key={person.id} value={person} className="data-focus:bg-blue-100">
              {person.name}
            </ListboxOption>
          ))}
        </ListboxOptions>
      </Listbox>
    </Field>
  )
}

```

--------------------------------

### Render Switch as a div using the as prop

Source: https://headlessui.com/react/switch

Use the `as` prop to render the Switch component as a `div` instead of the default `button`. Custom components must forward refs so Headless UI can wire things up correctly. The example uses `data-checked` and `group-data-checked` classes for styling.

```jsx
import { Switch } from '@headlessui/react'
import { useState } from 'react'

function Example() {
  const [enabled, setEnabled] = useState(false)

  return (
    <Switch

      as="div"
      checked={enabled}
      onChange={setEnabled}
      className="group inline-flex h-6 w-11 items-center rounded-full bg-gray-200 transition data-checked:bg-blue-600"
    >
      <span className="size-4 translate-x-1 rounded-full bg-white transition group-data-checked:translate-x-6" />
    </Switch>
  )
}

```

--------------------------------

### Disable a Select with Field disabled prop

Source: https://headlessui.com/react/select

Add the disabled prop to the Field component to disable a Select and its associated Label and Description. The example also shows using data-disabled: classes for styling.

```jsx
import { Description, Field, Label, Select } from '@headlessui/react'

function Example() {
  return (

    <Field disabled>
      <Label className="data-disabled:opacity-50">Project status</Label>
      <Description className="data-disabled:opacity-50">This will be visible to clients on the project.</Description>
      <Select name="status" className="data-disabled:bg-gray-100">
        <option value="active">Active</option>
        <option value="paused">Paused</option>
        <option value="delayed">Delayed</option>
        <option value="canceled">Canceled</option>
      </Select>
    </Field>
  )
}

```

--------------------------------

### Basic Textarea component usage

Source: https://headlessui.com/react/textarea

Import the Textarea component and render it with a name prop. Any props valid on a native textarea can be passed.

```jsx
import { Textarea } from '@headlessui/react'

function Example() {
  return <Textarea name="description"></Textarea>
}
```

--------------------------------

### Transition

Source: https://headlessui.com/react/transition

The Transition component controls show/hide animations for its children. It accepts props for rendering element, show state, initial mount animation, unmount behavior, and enter/leave lifecycle callbacks.

```APIDOC
## Transition

### Description
The Transition component is used to animate the appearance and disappearance of its children based on the `show` prop. It supports configurable rendering via the `as` prop and provides lifecycle callbacks for enter and leave transitions.

### Props

| Prop | Default | Type | Description |
|------|---------|------|-------------|
| `as` | `Fragment` | `String | Component` | The element or component the transition should render as. |
| `show` | — | `Boolean` | Whether the children should be shown or hidden. |
| `appear` | `false` | `Boolean` | Whether the transition should run on initial mount. |
| `unmount` | `true` | `Boolean` | Whether the element should be unmounted or hidden based on the show state. |
| `beforeEnter` | — | `() => void` | Callback which is called before we start the enter transition. |
| `afterEnter` | — | `() => void` | Callback which is called after we finished the enter transition. |
| `beforeLeave` | — | `() => void` | Callback which is called before we start the leave transition. |
| `afterLeave` | — | `() => void` | Callback which is called after we finished the leave transition. |

### Data Attributes

| Attribute | Description |
|-----------|-------------|
| `data-closed` | Present before transitioning in, and when transitioning out. |
| `data-enter` | Present when transitioning in. |
| `data-leave` | Present when transitioning out. |
| `data-transition` | Present when transitioning in or out. |
```

--------------------------------

### Control the selected tab with selectedIndex and onChange

Source: https://headlessui.com/react/tabs

Use the `selectedIndex` prop and `onChange` callback to control the selected tab externally. The example uses `useState` to manage the selected index, passing `selectedIndex` and `setSelectedIndex` to the `TabGroup`.

```jsx
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
import { useState } from 'react'

function Example() {

  const [selectedIndex, setSelectedIndex] = useState(0)

  return (

    <TabGroup selectedIndex={selectedIndex} onChange={setSelectedIndex}>
      <TabList>
        <Tab>Tab 1</Tab>
        <Tab>Tab 2</Tab>
        <Tab>Tab 3</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>Content 1</TabPanel>
        <TabPanel>Content 2</TabPanel>
        <TabPanel>Content 3</TabPanel>
      </TabPanels>
    </TabGroup>
  )
}

```

--------------------------------

### Configuring anchor options with an object API

Source: https://headlessui.com/react/popover

Use the object API for the anchor prop to control gap, offset, and padding values via JavaScript.

```jsx
import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'

function Example() {
  return (
    <Popover className="relative">
      <PopoverButton>Solutions</PopoverButton>

      <PopoverPanel anchor={{ to: 'bottom start', gap: '4px' }} className="flex flex-col">
        <a href="/analytics">Analytics</a>
        <a href="/engagement">Engagement</a>
        <a href="/security">Security</a>
        <a href="/integrations">Integrations</a>
      </PopoverPanel>
    </Popover>
  )
}
```

--------------------------------

### Basic Fieldset and Legend example

Source: https://headlessui.com/react/fieldset

Use the Fieldset and Legend components to group a set of form controls together with a title. The Legend component is rendered as a div for easier styling, while Fieldset uses the native fieldset element.

```jsx
import { Field, Fieldset, Input, Label, Legend, Select, Textarea } from '@headlessui/react'

function Example() {
  return (
    <Fieldset className="space-y-8">
      <Legend className="text-lg font-bold">Shipping details</Legend>
      <Field>
        <Label className="block">Street address</Label>
        <Input className="mt-1 block" name="address" />
      </Field>
      <Field>
        <Label className="block">Country</Label>
        <Select className="mt-1 block" name="country">
          <option>Canada</option>
          <option>Mexico</option>
          <option>United States</option>
        </Select>
      </Field>
      <Field>
        <Label className="block">Delivery notes</Label>
        <Textarea className="mt-1 block" name="notes" />
      </Field>
    </Fieldset>
  )
}
```

--------------------------------

### Animate with Framer Motion using static prop and open render prop

Source: https://headlessui.com/react/popover

Use the static prop on PopoverPanel and conditionally render it with the open render prop to integrate Framer Motion. Wrap the panel in AnimatePresence and use motion.div with initial, animate, and exit props.

```jsx
import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
import { AnimatePresence, motion } from 'framer-motion'

function Example() {
  return (
    <Popover>

      {({ open }) => (
        <>
          <PopoverButton>Solutions</PopoverButton>
          <AnimatePresence>

            {open && (
              <PopoverPanel

                static
                as={motion.div}
                initial={{ opacity: 0, scale: 0.95 }}
                animate={{ opacity: 1, scale: 1 }}
                exit={{ opacity: 0, scale: 0.95 }}
                anchor="bottom"
                className="flex origin-top flex-col"
              >
                <a href="/analytics">Analytics</a>
                <a href="/engagement">Engagement</a>
                <a href="/security">Security</a>
                <a href="/integrations">Integrations</a>
              </PopoverPanel>

            )}
          </AnimatePresence>
        </>

      )}
    </Popover>
  )
}

```
Tokens:
Raw