License information frontend and UI - 3

-- |
| `as` | String \| Component | `label` | The element or component the `Listbox.Label` should render as. |

#### Listbox.Options

```jsx
<Listbox.Options>
  <Listbox.Option value="option-a">{/* ... */}></Listbox.Option>
  {/* ... */}>
</Listbox.Options>
```

##### Props

| Prop     | Type                | Default | Description                                                                 |
| -------- | 
--------- | ------- | 






----- |
| `as`     | String \| Component | `ul`    | The element or component the `Listbox.Options` should render as.            |
| `static` | Boolean             | `false` | Whether the element should ignore the internally managed open/closed state. |

##### Render prop object

| Prop   | Type    | Description                         |
| ------ | ------- | 


----- |
| `open` | Boolean | Whether or not the listbox is open. |

#### Listbox.Option

```jsx
<Listbox.Option value="option-a">Option A</Listbox.Option>
```

##### Props

| Prop       | Type                    | Default     | Description                                                                             |
| 
 | 

--- | 
- | 







------- |
| `as`       | String \| Component     | `li`        | The element or component the `Listbox.Option` should render as.                         |
| `value`    | `T` |  | The option value. |
| `disabled` | Boolean                 | `false`     | Whether or not the option should be disabled for keyboard navigation and ARIA purposes. |

##### Render prop object

| Prop       | Type    | Description                                                                          |
| 
 | ------- | 







---- |
| `active`   | Boolean | Whether or not the option is the active/focused option in the list.                  |
| `selected` | Boolean | Whether or not the option is the selected option in the list.                        |
| `disabled` | Boolean | Whether or not the option is the disabled for keyboard navigation and ARIA purposes. |

## Switch (Toggle)

[View live demo on CodeSandbox](https://codesandbox.io/s/headlessuireact-switch-example-y40i1?file=/src/App.js)

The `Switch` component and related child components are used to quickly build custom switch/toggle components that are fully accessible out of the box, including correct ARIA attribute management and robust keyboard support.

- [Basic example](#basic-example-3)
- [Using a custom label](#using-a-custom-label-1)
- [Component API](#component-api-3)

### Basic example

Switches are built using the `Switch` component. Optionally you can also use the `Switch.Group` and `Switch.Label` components.

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

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

  return (
    <Switch
      checked={enabled}
      onChange={setEnabled}
      className={`${switchValue ? "bg-blue-600" : "bg-gray-200"} relative inline-flex h-6 rounded-full w-8`}
    >
      <span className="sr-only">Enable notifications</span>
      <span
        className={`${enabled ? "translate-x-4" : "translate-x-0"} inline-block w-4 h-4 transform bg-white rounded-full`}
      />
    </Switch>
  )
}
```

### Using a custom label

By default the `Switch` will use the contents as the label for screenreaders. If you need more control, you can render a `Switch.Label` outside of the `Switch`, as long as both the switch and label are within a parent `Switch.Group`.

Clicking the label will toggle the switch state, like you'd expect from a native checkbox.

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

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

  return (
    <Switch.Group>
      <Switch.Label>Enable notifications</Switch.Label>
      <Switch
        checked={enabled}
        onChange={setEnabled}
        className={`${switchValue ? "bg-blue-600" : "bg-gray-200"} relative inline-flex h-6 rounded-full w-8`}
      >
        <span
          className={`${enabled ? "translate-x-4" : "translate-x-0"} inline-block w-4 h-4 transform bg-white rounded-full`}
        />
      </Switch>
    </Switch.Group>
  )
}
```

### Component API

#### Switch

```jsx
<Switch checked={checkedState} onChange={setCheckedState}>
  <span className="sr-only">Enable notifications</span>
  {/* ... */}
</Switch>
```

##### Props

| Prop       | Type                    | Default                                 | Description                                              |
| 
 | 

--- | 


--------- | 




------ |
| `as`       | String \| Component     | `button` | The element or component the `Switch` should render as. |
| `checked`    | Boolean |                              | Whether or not the switch is checked.                                      |
| `onChange` | `(value: boolean): void`      |                              | The function to call when the switch is toggled.      |

##### Render prop object

| Prop   | Type    | Description                         |
| ------ | ------- | 


----- |
| `checked` | Boolean | Whether or not the switch is checked. |


#### Switch.Label

```jsx
<Switch.Group>
  <Switch.Label>Enable notifications</Switch.Label>
  <Switch checked={enabled} onChange={setEnabled} className="...">
    {/* ... */}
  </Switch>
</Switch.Group>
```

##### Props

| Prop       | Type                    | Default                                 | Description                                              |
| 
 | 

--- | 


--------- | 




------ |
| `as`       | String \| Component     | `label` | The element or component the `Switch.Label` should render as. |

#### Switch.Group

```jsx
<Switch.Group>
  <Switch.Label>Enable notifications</Switch.Label>
  <Switch checked={enabled} onChange={setEnabled} className="...">
    {/* ... */}
  </Switch>
</Switch.Group>
```

##### Props

| Prop       | Type                    | Default                                 | Description                                              |
| 
 | 

--- |