### Basic Dropdown Menu Example
Source: https://headlessui.com/react/menu
A fundamental example demonstrating the Menu, MenuButton, MenuItems, and MenuItem components for creating a dropdown.
```jsx
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
function Example() {
return (
)
}
```
--------------------------------
### Install Headless UI
Source: https://headlessui.com/react/button
Install the Headless UI library for React using npm.
```bash
npm install @headlessui/react
```
--------------------------------
### Basic Listbox Example
Source: https://headlessui.com/react/listbox
A fundamental example demonstrating the usage of Listbox, ListboxButton, ListboxOptions, and ListboxOption components. The ListboxButton toggles the ListboxOptions, which are keyboard-navigable when open.
```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 (
{selectedPerson.name}
{people.map((person) => (
{person.name}
))}
)
}
```
--------------------------------
### Basic Select Example
Source: https://headlessui.com/react/select
A basic implementation of the Select component with options.
```jsx
import { Select } from '@headlessui/react'
function Example() {
return (
)
}
```
--------------------------------
### Basic Radio Group Example
Source: https://headlessui.com/react/radio-group
A fundamental example demonstrating the usage of RadioGroup, Field, Label, and Radio components to create a selectable list.
```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 (
{plans.map((plan) => (
))}
)
}
```
--------------------------------
### Basic Tab Group Example
Source: https://headlessui.com/react/tabs
A fundamental example demonstrating the structure of a tab interface using TabGroup, TabList, Tab, TabPanels, and TabPanel components. The first tab is selected by default.
```jsx
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
function Example() {
return (
Tab 1Tab 2Tab 3Content 1Content 2Content 3
)
}
```
--------------------------------
### Basic Switch Example
Source: https://headlessui.com/react/switch
A fundamental example of the Switch component. Toggling the switch calls the onChange function with a negated version of the checked value.
```jsx
import { Switch } from '@headlessui/react'
import { useState } from 'react'
function Example() {
const [enabled, setEnabled] = useState(false)
return (
)
}
```
--------------------------------
### Basic Combobox Example
Source: https://headlessui.com/react/combobox
A fundamental example of a Combobox component with filtering logic. It requires importing Combobox, ComboboxInput, ComboboxOption, and ComboboxOptions from '@headlessui/react'.
```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 (
setQuery('')}>
person?.name}
onChange={(event) => setQuery(event.target.value)}
/>
{filteredPeople.map((person) => (
{person.name}
))}
)
}
```
--------------------------------
### Basic Disclosure Example
Source: https://headlessui.com/react/disclosure
A fundamental example demonstrating the Disclosure, DisclosureButton, and DisclosurePanel components. The button automatically toggles the panel, and accessibility attributes are managed by default.
```jsx
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react'
function Example() {
return (
Is team pricing available?
Yes! You can purchase a license that you can share with your entire team.
)
}
```
--------------------------------
### Rendered Checkbox Example (HTML)
Source: https://headlessui.com/react/checkbox
An example of how a Checkbox component might be rendered in HTML, showing the `data-checked` and `data-disabled` attributes.
```html
```
--------------------------------
### Basic Fieldset Example
Source: https://headlessui.com/react/fieldset
Demonstrates how to use the Fieldset, Legend, Field, Label, Input, Select, and Textarea components to create a grouped form with a title.
```APIDOC
## Basic Fieldset Example
Use the `Fieldset` and `Legend` components to group a set of form controls together with a title:
```javascript
import { Field, Fieldset, Input, Label, Legend, Select, Textarea } from '@headlessui/react'
function Example() {
return (
)
}
```
Since the native HTML `