### Field Component Example

Source: https://base-ui.com/react/components/field

A basic example demonstrating the usage of the Field component.

```typescript
1bd:[["$","$L6f","pre-0",{"children":["$","code","code-0",{"children":["$","span","span-0",{"className":"frame","data-lined":"","children":["$","span","span-0",{"className":"line","data-ln":1,"children":["$","span","span-0",{"className":"pl-en","children":["TransitionStatus"]}]}]}]}]}]
```

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

### ValidationMode Example: onSubmit

Source: https://base-ui.com/react/components/field

Example of setting the validationMode to 'onSubmit'.

```ts
'onSubmit'
```

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

### React Input Component Example

Source: https://base-ui.com/react/components/input

Demonstrates the basic usage of the Input component within a React application. This example shows how to render a simple input field.

```typescript
self.__next_f.push([1, "7V3dbptQDH4VFKnTJjVR+GszdlNp6lNsvWCBBhQSEGxNuynvPp9DtK1LQ0wDPqbxZVsanGNj+/v8cc6fHlm3tJf/tsYn9ey7LnKHAFQ+Vo33Ps7QZj/7fQmPEiyeuv4hrVJ4AkfbDu3SjexfYGJ3+NkAJqCfH90d+Mj/UMhEV+7RFi4/dIn1q/HPX9ewMp2uhoMz3bJOvbFeqrmtbp0CPMKuGTwyRRY+Na5K0LFxD1jj7rP4sdGyT8TedJl7Uy0YVNkSUjYkKp5OnefZj1WzbdRu9Zi7VfdRY1VtKr4Pal1YWfnVZ+7XRVhQ+hPwYFvHTieO/9zEV1uxxN6zjFesouiKe9KHDnxcpT+hq2MeS7Prsw+ma+bBpGFREitAzTycbElNwWwIqWkzhGi6nk5ZefYjc89CF5+XR3yaL7N58t54nvAm5HniopmEMF6JB2Ve/+6K4kXjinygfvrtKc5wdedTl2rv3ocIvL3Uc2Mo96yA1A2bQ7jbrIM3DRjgexgdgzYB0uO4ggkGfBhLyB6F5bI56Mm5UhtNlrIue4YcukmAIDqxhzk5l7w4o+hz2IBmZLfUwYwkFcntQpJivZSWQ1QKwWxIC0d4zYZs7mQATJUVsQRSEZ4p7xvMwmF0C2aywm42d1hehFFE7NQ3iFLoYSU3+snmzlKsQKiXks5BO49zap86SOhpsCjppF+CpAl0LuLaFq5FI3ujruU+d6DO+kVzd2Oq+apy0BE2WyYEsBDAQgC/KlVz1w1u0uh7wj1Tk8cRtwbd4S5YHITSwDn7MOIukNQ6g/twlWZMlczpOonLlJc60uEujxRh25ByBHeZpCjbBhVO3Gcjw5G2ecykbQ738Yh6v3EB72quo1rH8Xbn/R07VkSLwlkJZ3WunJVrULToimjxhNcL10/jot6X5EhynMPWJlVMrwx0+SsDhwJWycdX3JCFi+ZEBaoioOrZI1UXTY5SSz1dg1JPl5YOQkfPDaYOv6TiDyylmDdQ+tBEiAUbcSn9RGDZxaOlx/OWBonkTwQa4HfkffVP/WD7Gg0qNHZhTa0p9Nz0bTUaVVvQn8FXCsx43UMLx6jzoIcEB33kQY92kN/iSXjXUeFGS/CDAHYamsdJnh0TeZEnWY9/Tzgc7sr3J1fCXQl3NSTuykM28b2UCPQcXtgreeW249hDwzQpfahdRCYzKX1S+gZV+loQDOTIDc0kkFuGROV9NAw+7StarDFlvdsxKzDpo2eRxiqq3tQajBbdtbxpJaoVaX/OuP3x+UsLdtl6nOuTNJgn7TG392PJAwrJJffSGaJn0UIlCZXUcey1oDGNp1LRdbfxbAuSkBqH+2j2gtwyJHdx3K677e7cT33qZw5HTKmt9eD+/gzukMMJhkV9qk+gzlO8HIVFkaVxdLuG05fgQCa48Msorn/4DCcY3q6KJKzSCgJy+xs="])
self.__next_f.push([1, "14:[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"$L3c\",null,{\"children\":[[\"$\",\"$L3d\",null,{\"children\":\"Input\"}],[\"$\",\"$L3e\",null,{\"children\":[[\"$\",\"$L3f\",null,{\"children\":[[\"$\",\"$L40\",null,{\"href\":\"#\",\"children\":\"(Top)\"}]], [\"$\",\"$L3e\",null,{}] ] } ], [\"$\",\"$L3f\",null,{\"children\":[[\"$\",\"$L40\",null,{\"href\":\"#usage-guidelines\",\"children\":\"Usage guidelines\"}]], [\"$\",\"$L3e\",null,{}] ] } ], [\"$\",\"$L3f\",null,{\"children\":[[\"$\",\"$L40\",null,{\"href\":\"#anatomy\",\"children\":\"Anatomy\"}]], [\"$\",\"$L3e\",null,{}] ] } ], [\"$\",\"$L3f\",null,{\"children\":[[\"$\",\"$L40\",null,{\"href\":\"#api-reference\",\"children\":\"API reference\"}]], [\"$\",\"$L3e\",null,{}] ] } ] ] } ], [\"$\",\"$L41\",null,{\"children\":[[\"$\",\"h1\",null,{\"className\":\"MdH1\",\"id\":\"input\",\"children\":\"Input\"}], \"\\n\", [\"$\",\"div\",null,{\"className\":\"Subtitle MdSubtitle\",\"children\":[[\"$\",\"p\",null,{\"children\":[\"A native input element that automatically works with \",[\"$\",\"$L9\",null,{\"href\":\"/react/components/field\",\"className\":\"Link\",\"children\":\"Field\"}],\".\" ]}], [\"$\",\"$L42\",null,{}] ] } ], \"\\n\",null,\"\\n\", [\"$\",\"$L43\",null,{\"url\":\"file:///opt/build/repo/docs/src/app/(docs)/react/components/input/demos/hero/index.ts\",\"code\":\"$undefined\",\"precompute\":{\"CssModules\":{\"url\":\"file:///opt/build/repo/docs/src/app
```

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

### Field Component Hero Example

Source: https://base-ui.com/react/components/field

Demonstrates the basic usage of the Field component. This example uses CSS Modules for styling.

```tsx
import React from 'react';
import Field from '@base-ui/react/field';

export default function Hero() {
  return (
    <Field
      label="Name"
      description="This is the name field."
      error="This field is required."
      required
      control={<input type="text" />}
    />
  );
}
```

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

### Checkbox Hero Example

Source: https://base-ui.com/react/components/checkbox

Demonstrates the basic usage of the Checkbox component.

```tsx
import { Checkbox } from "@mui/base/Checkbox";

export default function CheckboxIntroduction() {
  return <Checkbox />;
}
```

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

### CheckboxGroup Nested Example

Source: https://base-ui.com/react/components/checkbox-group

Example showcasing a nested CheckboxGroup structure.

```typescript
boolean | undefined
```

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

### Checkbox Group Hero Example (CSS Modules)

Source: https://base-ui.com/react/components/checkbox-group

Demonstrates the Checkbox Group component using CSS Modules for styling. This example showcases the basic integration and usage within a React application.

```tsx
import React from 'react';
import {
  CheckboxGroup,
  CheckboxGroupProps,
} from '@base-ui/react/checkbox-group';
import {
  Checkbox,
  CheckboxProps,
} from '@base-ui/react/checkbox';

const CssModules = ({
  className,
  ...props
}: CheckboxGroupProps) => (
  <CheckboxGroup {...props} className={className}>
    <Checkbox value="1">Option 1</Checkbox>
    <Checkbox value="2">Option 2</Checkbox>
    <Checkbox value="3">Option 3</Checkbox>
  </CheckboxGroup>
);

export default CssModules;
```

```css
.container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
```

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

### CheckboxGroup Parent Example

Source: https://base-ui.com/react/components/checkbox-group

Example demonstrating how to use CheckboxGroup with a parent checkbox to manage group selection.

```typescript
string[] | undefined
```

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

### Field Validity Usage Example

Source: https://base-ui.com/react/components/field

Example of using Field.Validity to render content based on the field's validity state.

```typescript
Field.Validity {
  (state: Field.Validity.State) => React.ReactNode;
}
```

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

### Field Functionality Example

Source: https://base-ui.com/react/components/field

Provides an example of a function that can be associated with field actions, such as validation.

```typescript
actions: FieldRootActions = { validate: () => void }
```

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

### Field Class Name Function Example

Source: https://base-ui.com/react/components/field

Example of a function that returns a CSS class based on the field's state.

```typescript
| ReactElement
| (( 
 props: HTMLProps,
 state: Field.Root.State,
 ) => ReactElement)
```

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

### Checkbox with Custom Indicator and State

Source: https://base-ui.com/react/components/checkbox

Demonstrates a checkbox with a custom indicator and how its state is managed. This example uses CSS modules for styling.

```jsx
("$", "label", null, {
  "className": "css-modules_Label__mzO8t",
  "children": [
    ("$", "$L6b", null, {
      "defaultChecked": true,
      "className": "css-modules_Checkbox___OcFK",
      "children": [
        ("$", "$L6c", null, {
          "className": "css-modules_Indicator__8Dw4b",
          "children": [
            ("$", "svg", null, {
              "width": "16",
              "height": "16",
              "viewBox": "0 0 16 16",
              "fill": "none",
              "stroke": "currentColor",
              "style": {
                "display": "block"
              },
              "children": [
                ("$", "path", null, {
                  "d": "m2.5 8.5 4 4 7-9"
                })
              ]
            })
          ]
        })
      ]
    }),
    "Enable notifications"
  ]
})
```

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

### Field Validity State Example

Source: https://base-ui.com/react/components/field

Demonstrates how to use the 'validity' state for a field. This is useful for indicating whether the field's input is valid or not.

```typescript
validity: boolean
```

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

### Checkbox Group Hero Example (Tailwind CSS)

Source: https://base-ui.com/react/components/checkbox-group

Illustrates the Checkbox Group component styled with Tailwind CSS utility classes. This example highlights a different approach to styling for rapid UI development.

```tsx
import React from 'react';
import {
  CheckboxGroup,
  CheckboxGroupProps,
} from '@base-ui/react/checkbox-group';
import {
  Checkbox,
  CheckboxProps,
} from '@base-ui/react/checkbox';

const Tailwind = ({
  className,
  ...props
}: CheckboxGroupProps) => (
  <CheckboxGroup {...props} className={className}>
    <Checkbox value="1">Option 1</Checkbox>
    <Checkbox value="2">Option 2</Checkbox>
    <Checkbox value="3">Option 3</Checkbox>
  </CheckboxGroup>
);

export default Tailwind;
```

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

### Checkbox Indicator State Example

Source: https://base-ui.com/react/components/checkbox

Demonstrates the Checkbox.Indicator component, often used to visually represent the state of a checkbox. This example shows its integration within a JSX structure.

```tsx
<div>
  <span className="pl-s">"</span>
  <span className="pl-pds">"</span>notifications-checkbox</span>
  <span className="pl-pds">"</span>
  </span> 
  <mark className="pl-e di-ak">nativeButton</mark> 
  <mark>render=<span>{</span></mark>
    <span><</span>
      <span className="pl-ent">button</span> 
    <span> /</span>
    <span>></span>
  </mark>
  <span>></span>
</div>
<span className="line" dataLn={4}> <span><</span><span className="pl-c1 di-jsx">Checkbox.Indicator</span> /<span>></span></span>
<span className="line" dataLn={5}> <span></</span><span className="pl-c1 di-jsx">Checkbox.Root</span><span>></span></span>
<span className="line" dataLn={6}> <span></</span><span className="pl-ent">div</span><span>></span></span>
```

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

### Field Render Prop Example

Source: https://base-ui.com/react/components/field

Illustrates the 'render' prop for the Field component, showing how to control the rendered element and its behavior. It explains when to use 'false' for 'render' to prevent inheriting label behaviors.

```tsx
<label>
Whether the component renders a native <code className="Code MdCode language-tsx">label</code> element when replacing it via the <code className="Code MdCode language-tsx">render</code> prop.
Set to <code className="Code MdCode language-tsx">false</code> if the rendered element is not a label (for example, <code className="Code MdCode language-tsx"><div></code>).

This is useful to avoid inheriting label behaviors on <code className="Code MdCode language-tsx"><button></code> controls (such as <code className="Code MdCode language-tsx"><Select.Trigger></code> and <code className="Code MdCode language-tsx"><Combobox.Trigger></code>), including avoiding <code className="Code MdCode language-tsx">:hover</code> on the button when hovering the label, and preventing clicks on the label from firing on the button.

```

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

### Checkbox Class Name Example

Source: https://base-ui.com/react/components/checkbox

Example of how to apply a CSS class to the checkbox element. It can be a direct string or a function returning a string based on state.

```typescript
type _ = string | ((
 props: HTMLProps,
 state: Checkbox.Indicator.State,
 ) => ReactElement)
```

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

### Validation Mode Example

Source: https://base-ui.com/react/components/field

Example of setting the validation mode to 'onSubmit'. This prop determines when the field should be validated and takes precedence over the `validationMode` prop on the `<Form>` component.

```tsx
onSubmit
```

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

### CheckboxGroup Parent Component

Source: https://base-ui.com/react/components/checkbox-group

Example of a parent component utilizing the CheckboxGroup with CSS Modules for styling. It demonstrates basic integration and setup.

```tsx
import React from 'react';
import '@base-ui/react/checkbox';
import '@base-ui/react/checkbox-group';

import './index.module.css';

const Parent = () => {
  return (
    <div className="Parent">
      {/* CheckboxGroup content goes here */}
    </div>
  );
};

export default Parent;
```

```css
.Parent {
  /* CSS for the parent component */
}
```

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

### Field.Item.Props - Disabled Example

Source: https://base-ui.com/react/components/field

Example showing the 'disabled' property for a Field item.

```typescript
disabled?: boolean;
```

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

### Labeling a Checkbox Group

Source: https://base-ui.com/react/components/checkbox-group

This example demonstrates how to label a checkbox group using `aria-labelledby` and a separate caption element. It also shows how to set default selected values.

```tsx
"use client";
import * as React from 'react';
import { Checkbox } from '@base-ui/react/checkbox';
import { CheckboxGroup } from '@base-ui/react/checkbox-group';
import styles from './index.module.css';

export default function ExampleCheckboxGroup() {
  const id = React.useId();
  return (
    <CheckboxGroup
      aria-labelledby={id}
      defaultValue={['fuji-apple']}
      className={styles.CheckboxGroup}
    >
      <div className={styles.Caption} id={id}>
        Apples
      </div>

      <label className={styles.Item}>
        <Checkbox.Root name="apple" value="fuji-apple" className={styles.Checkbox}>
          <Checkbox.Indicator className={styles.Indicator}>
            <CheckIcon />
          </Checkbox.Indicator>
        </Checkbox.Root>
        Fuji
      </label>

      <label className={styles.Item}>
        <Checkbox.Root name="apple" value="gala-apple" className={styles.Checkbox}>
          <Checkbox.Indicator className={styles.Indicator}>
            <CheckIcon />
          </Checkbox.Indicator>
        </Checkbox.Root>
        Gala
      </label>

      <label className={styles.Item}>
        <Checkbox.Root name="apple" value="granny-smith-apple" className={styles.Checkbox}>
          <Checkbox.Indicator className={styles.Indicator}>
            <CheckIcon />
          </Checkbox.Indicator>
        </Checkbox.Root>
        Granny Smith
      </label>
    </CheckboxGroup>
  );
}

```

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

### Importing Checkbox and CheckboxGroup

Source: https://base-ui.com/react/components/checkbox-group

Import the Checkbox and CheckboxGroup components from their respective modules. This is the initial setup required to use the CheckboxGroup component.

```tsx
import { Checkbox } from "@base-ui/react/checkbox";
import { CheckboxGroup } from "@base-ui/react/checkbox-group";
```

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

### Nested Parent Checkbox Example

Source: https://base-ui.com/react/components/checkbox-group

Demonstrates a nested parent checkbox within the CheckboxGroup component. This example shows how to create hierarchical selections.

```tsx
import React from 'react';
import '@base-ui/react/checkbox';
import '@base-ui/react/checkbox-group';

import './index.module.css';

const NestedParentCheckbox = () => {
  return (
    <div className="NestedParentCheckbox">
      {/* Nested CheckboxGroup content goes here */}
    </div>
  );
};

export default NestedParentCheckbox;
```

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

### FieldControlChangeEventReason Code Example

Source: https://base-ui.com/react/components/field

Illustrates the 'none' value within the FieldControlChangeEventReason context.

```typescript
none
```

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

### Field.Control.State Example Usage

Source: https://base-ui.com/react/components/field

Illustrates how to define a function that accepts the Field.Control.State type. The function can then access properties like 'disabled', 'touched', 'dirty', 'valid', 'filled', and 'focused'.

```typescript
function example(state: Field.Control.State) {
  // Access state properties here
}
```

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

### Nested CheckboxGroup Example

Source: https://base-ui.com/react/components/checkbox-group

This snippet demonstrates a nested CheckboxGroup component, showcasing how to manage state and interactions within a hierarchical structure. It utilizes CSS Modules for styling.

```tsx
self.__next_f.push([1,"63:[\"$\",\"$L43\",null,{\"url\":\"file:///opt/build/repo/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/index.ts\",\"code\":\"$undefined\",\"precompute\":{\"CssModules\":{\"url\":\"file:///opt/build/repo/docs/src/app/(docs)/react/components/checkbox-group/demos/nested/css-modules/index.tsx\",\"fileName\":\"index.tsx\",\"language\":\"tsx\",\"source\":{\"hastCompressed\":\"$7d\"},\"extraFiles\":{\"index.module.css\":{\"source\":{\"hastCompressed\":\"$7e\"},\"language\":\"css\"}},\"externals\":[\"react\",\"@base-ui/react/checkbox\",\"@base-ui/react/checkbox-group\"],\"components\":{\"CssModules\":\"$L7f\"},\"variants\":\"$undefined\",\"variant\":\"$undefined\",\"fileName\":\"$undefined\",\"initialVariant\":\"$undefined\",\"defaultVariant\":\"$undefined\",\"highlightAfter\":\"idle\",\"enhanceAfter\":\"idle\",\"skipFallback\":\"$undefined\",\"controlled\":\"$undefined\",\"name\":\"Nested\",\"slug\":\"nested\",\"globalsCode\":[],\"fallback\":\"$undefined\",\"children\":\"$L80\"}}]\n64:[\"$\",\"h2\",null,{\"className\":\"MdH2\",\"id\":\"api-reference\",\"children\":[\"$\",\"a\",null,{\"className\":\"HeadingLink\",\"href\":\"#api-reference\",\"children\":\"API reference\"}]}]\n
```

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

### Field Component with Custom Styling

Source: https://base-ui.com/react/components/field

Shows the Field component with custom Tailwind CSS classes for styling. This example illustrates how to apply specific styles to the label, input, error, and description elements.

```jsx
<Field.Root>
  <Field.Label className="text-sm font-bold text-neutral-950 dark:text-white">Name</Field.Label>
  <Field.Input required placeholder="Required" className="h-8 self-stretch border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400" />
  <Field.Error match="valueMissing" className="text-sm text-red-700 dark:text-red-400">Please enter your name</Field.Error>
  <Field.Description className="text-sm text-neutral-600 dark:text-neutral-400">Visible on your profile</Field.Description>
</Field.Root>
```

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

### Basic Field Usage with CSS Modules

Source: https://base-ui.com/react/components/field

Demonstrates how to use the Field component with CSS Modules for styling. Includes label, control, error, and description.

```jsx
import { Field } from '@base-ui/react/field';
import styles from './index.module.css';

export default function ExampleField() {
  return (
    <Field.Root className={styles.Field}>
      <Field.Label className={styles.Label}>Name</Field.Label>
      <Field.Control required placeholder="Required" className={styles.Input} />

      <Field.Error className={styles.Error} match="valueMissing">
        Please enter your name
      </Field.Error>

      <Field.Description className={styles.Description}>Visible on your profile</Field.Description>
    </Field.Root>
  );
}
```

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

### Input Component with CSS Modules

Source: https://base-ui.com/react/components/input

Demonstrates the usage of the Base UI Input component styled with CSS Modules. Ensure the corresponding CSS module file is imported and applied.

```tsx
import styles from "./index.module.css";

export default function InputHero() {
  return (
    <Input className={styles.input} placeholder="Enter text...">
      <Input.Label>Label</Input.Label>
    </Input>
  );
}
```

```css
.input {
  /* Add your CSS module styles here */
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
```

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

### Fast Connect WebSocket Initialization

Source: https://base-ui.com/r/discord

Implements a fast connect mechanism for WebSocket connections to the Discord gateway. It checks for existing tokens and native Discord client features to determine the optimal connection encoding and compression method.

```javascript
!function(){if(null!=window.WebSocket&&function(n){try{var o=localStorage.getItem(n);if(null==o)return null;return JSON.parse(o)}catch(e){return null}}("token")&&!window.__OVERLAY__){var n=null!=window.DiscordNative||null!=window.require?"etf":"json",o=window.GLOBAL_ENV.GATEWAY_ENDPOINT+"/?encoding="+n+"&v="+window.GLOBAL_ENV.API_VERSION;null!=window.DiscordNative&&void 0!==window.Uint8Array&&void 0!==window.TextDecoder?o+="&compress=zstd-stream":void 0!==window.Uint8Array&&(o+="&compress=zlib-stream"),console.log("[FAST CONNECT] "+o+", encoding: "+n+", version: "+window.GLOBAL_ENV.API_VERSION);var e=new WebSocket(o);e.binaryType="arraybuffer";var i=Date.now(),r={open:!1,identify:!1,gateway:o,messages:[]};e.onopen=function(){console.log("[FAST CONNECT] connected in "+(Date.now()-i)+"ms"),r.open=!0},e.onclose=e.onerror=function(){window._ws=null},e.onmessage=function(n){r.messages.push(n)},window._ws={ws:e,state:r}}}();
```

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

### Basic Checkbox with CSS Modules

Source: https://base-ui.com/react/components/checkbox

Demonstrates how to use the Checkbox component with CSS Modules for styling. Ensure you have the necessary CSS module file imported.

```jsx
import * as React from 'react';
import { Checkbox } from '@base-ui/react/checkbox';
import styles from './index.module.css';

export default function ExampleCheckbox() {
  return (
    <label className={styles.Label}>
      <Checkbox.Root defaultChecked className={styles.Checkbox}>
        <Checkbox.Indicator className={styles.Indicator}>
          <CheckIcon />
        </Checkbox.Indicator>
      </Checkbox.Root>
      Enable notifications
    </label>
  );
}

function CheckIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      {...props}
      style={{ display: 'block', ...props.style }}
    >
      <path d="m2.5 8.5 4 4 7-9" />
    </svg>
  );
}

```

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

### Initialize Global Environment Variables

Source: https://base-ui.com/r/discord

Sets up global environment variables for the Discord web application, including API endpoints, build information, and feature flags. These variables are crucial for the application's runtime behavior and configuration.

```javascript
window.GLOBAL_ENV = {"NODE_ENV":"production","BUILT_AT":"1781294472152","HTML_TIMESTAMP":Date.now(),"BUILD_NUMBER":"562538","PROJECT_ENV":"production","RELEASE_CHANNEL":"stable","VERSION_HASH":"6acb41e5669233d86e38a591f28e35d7af0a0d68","PRIMARY_DOMAIN":"discord.com","SENTRY_TAGS":{"buildId":"6acb41e5669233d86e38a591f28e35d7af0a0d68","buildType":"normal"},"SENTRY_RELEASE":"2026-06-12-6acb41e5669233d86e38a591f28e35d7af0a0d68-discord_web","PUBLIC_PATH":"/assets/","LOCATION":"history","API_VERSION":9,"API_PROTOCOL":"https:","API_ENDPOINT":"//discord.com/api","GATEWAY_ENDPOINT":"wss://gateway.discord.gg","STATIC_ENDPOINT":"","ASSET_ENDPOINT":"//discord.com","MEDIA_PROXY_ENDPOINT":"//media.discordapp.net","IMAGE_PROXY_ENDPOINTS":"//images-ext-1.discordapp.net,//images-ext-2.discordapp.net","CDN_HOST":"cdn.discordapp.com","DEVELOPERS_ENDPOINT":"//discord.com","MARKETING_ENDPOINT":"//discord.com","WEBAPP_ENDPOINT":"//discord.com","WIDGET_ENDPOINT":"//discord.com/widget","SEO_ENDPOINT":"undefined","ADS_MANAGER_ENDPOINT":"//ads.discord.com","NETWORKING_ENDPOINT":"//router.discordapp.net","REMOTE_AUTH_ENDPOINT":"wss://remote-auth-gateway.discord.gg","RTC_LATENCY_ENDPOINT":"//latency.discord.media/rtc","INVITE_HOST":"discord.gg","GUILD_TEMPLATE_HOST":"discord.new","GIFT_CODE_HOST":"discord.gift","ACTIVITY_APPLICATION_HOST":"discordsays.com","MIGRATION_SOURCE_ORIGIN":"https://discordapp.com","MIGRATION_DESTINATION_ORIGIN":"https://discord.com","STRIPE_KEY":"pk_live_CUQtlpQUF0vufWpnpUmQvcdi","ADYEN_KEY":"live_E3OQ33V6GVGTXOVQZEAFQJ6DJIDVG6SY","BRAINTREE_KEY":"production_ktzp8hfp_49pp2rp4phym7387","MUX_ENV_KEY":"undefined","DEV_SESSION_KEY":"undefined","WEBAUTHN_ORIGIN":"discord.com","NATIVE_WEBSOCKET_ORIGIN":"undefined"}
```

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

### Basic Input with Label

Source: https://base-ui.com/react/components/input

Demonstrates how to use the Input component within a label for basic form input. It utilizes CSS Modules for styling.

```jsx
import { Input } from '@base-ui/react/input';
import styles from './index.module.css';

export default function ExampleInput() {
  return (
    <label className={styles.Label}>
      Name
      <Input placeholder="e.g. Colm Tuite" className={styles.Input} />
    </label>
  );
}
```

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

### Importing and Assembling Checkbox Components

Source: https://base-ui.com/react/components/checkbox

Demonstrates how to import the Checkbox component and its sub-components (Root and Indicator) from the Base UI React library. This is the foundational step for using the Checkbox.

```jsx
import { Checkbox } from "@base-ui/react/checkbox";

<Checkbox.Root>
  <Checkbox.Indicator />
</Checkbox.Root>
```

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

### Hero Demo Configuration

Source: https://base-ui.com/react/components/checkbox

Configuration for a 'Hero' variant of the checkbox component, specifying its code, components, name, slug, and URL.

```javascript
("$", "$L6d", null, {
  "code": "$14:props:children:0:1:props:children:7:props:precompute",
  "components": "$14:props:children:0:1:props:children:7:props:components",
  "name": "Hero",
  "slug": "hero",
  "url": "file:///opt/build/repo/docs/src/app/(docs)/react/components/checkbox/demos/hero/index.ts",
  "variantType": "$undefined"
})
```

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

### Importing the Input Component

Source: https://base-ui.com/react/components/input

Import the Input component from the '@base-ui/react/input' package. This is the standard way to bring the component into your React application.

```jsx
import { Input } from '@base-ui/react/input';

<Input />
```

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

### Importing the Input Component

Source: https://base-ui.com/react/components/input

Shows the basic import statement required to use the Input component in your React application.

```jsx
import { Input } from '@base-ui/react/input';
```

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

### CheckboxGroup with aria-labelledby

Source: https://base-ui.com/react/components/checkbox-group

Example of using CheckboxGroup with an aria-labelledby attribute to associate it with a descriptive label. This is useful for accessibility.

```tsx
<div id="protocols-label">Allowed network protocols</div>
<CheckboxGroup aria-labelledby="protocols-label">
<div>

```

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

### Input Component with Tailwind CSS

Source: https://base-ui.com/react/components/input

Shows how to use the Base UI Input component with Tailwind CSS for styling. Tailwind classes are applied directly to the component.

```tsx
export default function InputHero() {
  return (
    <Input className="p-2 border border-gray-300 rounded-md" placeholder="Enter text...">
      <Input.Label>Label</Input.Label>
    </Input>
  );
}
```

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

### Labeling a Checkbox with an Enclosing Label

Source: https://base-ui.com/react/components/checkbox

Demonstrates the simplest way to label a checkbox by wrapping both the checkbox and its label text within a single `<label>` element.

```html
<label>
  <Checkbox.Root />
  Accept terms and conditions
</label>
```

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

### Input Usage Guidelines

Source: https://base-ui.com/react/components/input

Ensures form controls have an accessible name. This can be achieved using a 'label' element or the 'Field' component. Refer to the forms guide for more details.

```tsx
["$","ul",null,{"className":"MdUl","children":["\n",["$","li",null,{"className":"MdListItem","children":[[["$","strong",null,{"children":["Form controls must have an accessible
 name
"]}]],": It can be created using
 a ",["$","code",null,{"className":"Code MdCode language-tsx","data-inline":"","children":["$","span",null,{"className":"pl-ent","children":["<",["$","span",null,{"className":"pl-ent","children":["label"]}]],">"]}]}]," element or the ",["$","code",null,{"className":"Code MdCode language-tsx","data-inline":"","children":["$","span",null,{"className":"pl-smi","children":["Field"]}]}]," component. See the ",["$","$L9",null,{"href":"/react/handbook/forms","className":"Link","children":["forms guide"]},"."]}]}],"\n"]}]
```

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

### Input Component Properties

Source: https://base-ui.com/react/components/input

Details the properties available for the Input component, such as 'as' for element replacement and 'style' for custom styling.

```typescript
type InputState = {
  disabled: boolean;
  touched: boolean;
  dirty: boolean;
  valid: boolean | null;
  filled: boolean;
};

type InputProps = HTMLProps & {
  state?: InputState;
  as?: ReactElement | ((state: InputState) => ReactElement);
  style?: React.CSSProperties | ((state: InputState) => React.CSSProperties) | undefined;
};
```

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

### Creating a Parent Checkbox for CheckboxGroup

Source: https://base-ui.com/react/components/checkbox-group

This guide explains how to create a parent checkbox that controls the selection state of all child checkboxes within a CheckboxGroup. It involves making the CheckboxGroup a controlled component and passing all child values.

```tsx
<CheckboxGroup
  allValues={['value1', 'value2', 'value3']}
>
  <CheckboxGroup.Item label="Item 1" value="value1" />
  <CheckboxGroup.Item label="Item 2" value="value2" />
  <CheckboxGroup.Item label="Item 3" value="value3" />
</CheckboxGroup>
```

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

### Parent Checkbox in CheckboxGroup

Source: https://base-ui.com/react/components/checkbox-group

This example demonstrates how to create a parent checkbox that controls all child checkboxes within a CheckboxGroup. It requires the CheckboxGroup to be a controlled component, passing all possible values to `allValues`, and adding the `parent` prop to the parent Checkbox.Root.

```jsx
'use client';
import * as React from 'react';
import { Checkbox } from '@base-ui/react/checkbox';
import { CheckboxGroup } from '@base-ui/react/checkbox-group';
import styles from './index.module.css';

const fruits = ['fuji-apple', 'gala-apple', 'granny-smith-apple'];

export default function ExampleCheckboxGroup() {
  const id = React.useId();
  const [value, setValue] = React.useState<string[]>([]);

  return (
    <CheckboxGroup
      aria-labelledby={id}
      value={value}
      onValueChange={setValue}
      allValues={fruits}
      className={styles.CheckboxGroup}
      style={{ marginLeft: '1rem' }}
    >
      <label className={styles.Item} id={id} style={{ marginLeft: '-1rem' }}>
        <Checkbox.Root className={styles.Checkbox} parent>
          <Checkbox.Indicator
            className={styles.Indicator}
            render={(props, state) => (
              <span {...props}>{state.indeterminate ? <HorizontalRuleIcon /> : <CheckIcon />}
              </span>
            )}
          />
        </Checkbox.Root>
        Apples
      </label>

      <label className={styles.Item}>
        <Checkbox.Root value="fuji-apple" className={styles.Checkbox}>
          <Checkbox.Indicator className={styles.Indicator}>
            <CheckIcon />
          </Checkbox.Indicator>
        </Checkbox.Root>
        Fuji
      </label>

      <label className={styles.Item}>
        <Checkbox.Root value="gala-apple" className={styles.Checkbox}>
          <Checkbox.Indicator className={styles.Indicator}>
            <CheckIcon />
          </Checkbox.Indicator>
        </Checkbox.Root>
        Gala
      </label>

      <label className={styles.Item}>
        <Checkbox.Root value="granny-smith-apple" className={styles.Checkbox}>
          <Checkbox.Indicator className={styles.Indicator}>
            <CheckIcon />
          </Checkbox.Indicator>
        </Checkbox.Root>
        Granny Smith
      </label>
    </CheckboxGroup>
  );
}

function CheckIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      {...props}
      style={{ display: 'block', ...props.style }}
    >
      <path d="m2.5 8.5 4 4 7-9" />
    </svg>
  );
}

function HorizontalRuleIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="12"
      height="12"
      viewBox="0 0 24 24"
      fill="currentColor"
      strokeWidth={1}
      {...props}
      style={{ display: 'block', ...props.style }}
    >
      <line
        x1="3"
        y1="12"
        x2="21"
        y2="12"
        stroke="currentColor"
        vectorEffect="non-scaling-stroke"
      />
    </svg>
  );
}

```

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

### Using Render Callback for Native Buttons with Wrapping Labels

Source: https://base-ui.com/react/components/checkbox-group

Utilize the `render` callback to support native buttons with wrapping labels. This ensures correct HTML structure by placing the hidden input outside the label when necessary.

```jsx
<div id="protocols-label">Allowed network protocols</div>
<CheckboxGroup aria-labelledby="protocols-label">
  <Checkbox.Root
    value="http"
    nativeButton
    render={(buttonProps) => (
      <label>
        <button {...buttonProps} />
        HTTP
      </label>
    )}
  />
</CheckboxGroup>
```

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

### Checkbox Rendering as a Native Button

Source: https://base-ui.com/react/components/checkbox-group

Demonstrates how to render a Checkbox.Root component as a native button element. This is useful for specific styling or accessibility requirements.

```tsx
<Checkbox.Root>
  <span>
    <Checkbox.Indicator />
    Checkbox
  </span>
</Checkbox.Root>

```

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

### Labeling a Checkbox Group

Source: https://base-ui.com/react/components/checkbox-group

Demonstrates how to label a CheckboxGroup using the `aria-labelledby` prop and a sibling label element. This is crucial for accessibility.

```jsx
<label id="my-checkbox-group-label">My Options</label>
<CheckboxGroup aria-labelledby="my-checkbox-group-label">
  <Checkbox.Root />
</CheckboxGroup>
```

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

### Input Component API Reference

Source: https://base-ui.com/react/components/input

The Input component accepts various props to control its behavior and appearance. These include managing the input's value (controlled or uncontrolled), handling change events, and applying custom CSS classes or styles.

```APIDOC
## Input Component API Reference

### Description
Provides props for the Input component to manage its state, handle user input, and customize its appearance.

### Props

- **defaultValue** (string | number | string[] | undefined) - The default value of the input. Use when uncontrolled.
- **value** (string | string[] | number | undefined) - The value of the input. Use when controlled.
- **onValueChange** (function) - Callback fired when the `value` changes. Use when controlled. Signature: `(value: string, eventDetails: Input.ChangeEventDetails) => void`
- **className** (string | function) - CSS class applied to the element, or a function that returns a class based on the component’s state. Signature: `(state: Input.State) => string | undefined`
- **style** (React.CSSProperties | function) - Style applied to the element, or a function that returns a style object based on the component’s state.
```

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

### Native Buttons with Wrapping Labels

Source: https://base-ui.com/react/components/checkbox-group

Demonstrates using native buttons with wrapping labels for Checkbox Group. The `render` callback is used to place the hidden input outside the label to avoid invalid HTML.

```tsx
render={
  <button />
}
```

```tsx
<div
  id="protocols-label"
>
  Allowed network protocols
</div>
```

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

### Field CSS Class Handling

Source: https://base-ui.com/react/components/field

Shows how to apply CSS classes to the field. A string can be provided directly, or a function can be used to dynamically return a class based on the component's state.

```typescript
className: string | ((state: Field.Label.State) => string)
```

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

### Checkbox Root with Native Button

Source: https://base-ui.com/react/components/checkbox

Shows the basic structure of the Checkbox.Root component, including how to pass native button props and render children. This is the foundational element for creating custom checkboxes.

```jsx
<Checkbox.Root
  nativeButton
  render={
    (buttonProps) => (
      <>
        <label>
          <button {...buttonProps} />
          Enable notifications
        </label>
      </>
    )
  }
/>
```

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

### Input Change Event Details

Source: https://base-ui.com/react/components/input

Provides details about the InputChangeEventDetails, including propagation allowance and the triggering element. Useful for handling input events.

```typescript
Element | undefined
```

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

### Native Button with Label Pattern

Source: https://base-ui.com/react/components/checkbox

Illustrates a pattern for using native buttons within labels for checkboxes. This approach ensures proper accessibility and functionality by placing the hidden input outside the label.

```tsx
Native buttons with wrapping labels are supported by using the <code className="Code MdCode language-tsx">render</code> callback to avoid invalid HTML, so the hidden input is placed outside the label:
```

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

### Using Checkbox in a Form

Source: https://base-ui.com/react/components/checkbox

Demonstrates how to use the Checkbox component within a form structure, including labels and root elements. This is useful for creating interactive forms.

```tsx
<Form.Root>
  <Field.Label>Stay logged in for 7 days</Field.Label>
  <Checkbox.Root />
</Form.Root>
```

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

### Checkbox Form Integration with Field

Source: https://base-ui.com/react/components/checkbox

Demonstrates how to integrate the Checkbox component with a form using the Field component for label associations. Ensure the Field component is imported.

```jsx
<Form>
  <Field.Root name="stayLoggedIn">
    <Checkbox />
  </Field.Root>
</Form>
```

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

### CheckboxGroup with Custom Rendered Button

Source: https://base-ui.com/react/components/checkbox-group

Demonstrates how to use CheckboxGroup with a custom button rendering. This allows for more flexible UI design by specifying a custom 'nativeButton' component.

```jsx
<Checkbox.Root
  id="protocol-http"
  value="http"
  nativeButton
  render={
    <button />
  }
/>
```

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

### Field Component Anatomy

Source: https://base-ui.com/react/components/field

Demonstrates the basic structure and import statement for the Field component. This snippet shows how to import the Field.Root component and its usage.

```jsx
import { Field } from '@base-ui/react/field';

<Field.Root>
  <Field.Label>Name</Field.Label>
  <Field.Input required placeholder="Required" />
  <Field.Error match="valueMissing">Please enter your name</Field.Error>
  <Field.Description>Visible on your profile</Field.Description>
</Field.Root>
```

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

### Field Component States

Source: https://base-ui.com/react/components/field

Demonstrates the different states a Field component can have, such as dirty, valid, filled, and focused. These states are managed internally by the component.

```json
{
  "dirty": {
    "descriptionText": "Whether the field value has changed from its initial value.",
    "required": true,
    "type": "$Lfe",
    "shortType": "$Lff",
    "description": "$L100"
  },
  "valid": {
    "descriptionText": "Whether the field is valid.",
    "required": true,
    "type": "$L101",
    "shortType": "$L102",
    "description": "$L103"
  },
  "filled": {
    "descriptionText": "Whether the field has a value.",
    "required": true,
    "type": "$L104",
    "shortType": "$L105",
    "description": "$L106"
  },
  "focused": {
    "descriptionText": "Whether the field is focused.",
    "required": true,
    "type": "$L107",
    "shortType": "$L108",
    "description": "$L109"
  }
}
```

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

### Field Component Anatomy

Source: https://base-ui.com/react/components/field

Illustrates the basic structure and available parts of the Field component for assembly. This shows how to import and arrange the different sub-components.

```jsx
import { Field } from '@base-ui/react/field';

<Field.Root>
  <Field.Label />
  <Field.Control />
  <Field.Description />
  <Field.Item />
  <Field.Error />
  <Field.Validity />
</Field.Root>
```

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

### Field Styling with CSS Properties

Source: https://base-ui.com/react/components/field

Illustrates how to apply inline styles to the field. Similar to className, a style object can be provided directly, or a function can return a style object based on the component's state.

```typescript
style: React.CSSProperties | ((state: Field.Label.State) => React.CSSProperties | undefined)
```

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

### Render Checkbox with Wrapping Label using Render Callback

Source: https://base-ui.com/react/components/checkbox

Utilize the `render` callback with `nativeButton` to manage complex label structures and avoid invalid HTML when the button is inside the label.

```jsx
<Checkbox.Root
  nativeButton
  render={(buttonProps) => (
    <label>
      <button {...buttonProps} />
      Enable notifications
    </label>
  )}
/>
```

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

### Field Actions Reference

Source: https://base-ui.com/react/components/field

Provides a reference to imperative actions for the field.

```typescript
React.RefObject<Field.Root.Actions | null>
```

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

### Input Change Event Details

Source: https://base-ui.com/react/components/input

Defines the structure of event details for input change events. Used in callbacks for input value changes.

```typescript
interface ChangeEventDetails {
  value: string;
  eventDetails: Input.ChangeEventDetails;
}
```

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

### Field.Description Component

Source: https://base-ui.com/react/components/field

Renders a paragraph with additional information about the field. It accepts a className prop for styling.

```react
<Field.Description>A paragraph with additional information about the field.
Renders a `<p>` element.</Field.Description>
```

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

### Input Change Event Reason

Source: https://base-ui.com/react/components/input

Defines the possible reasons for a change event in the Input component. Currently, only 'none' is supported.

```typescript
type InputChangeEventReason = 'none'
```

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

### Checkbox Anatomy

Source: https://base-ui.com/react/components/checkbox

Shows the basic structure for importing and using the Checkbox component's root and indicator parts.

```jsx
import { Checkbox } from '@base-ui/react/checkbox';

<Checkbox.Root>
  <Checkbox.Indicator />
</Checkbox.Root>
```

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

### Rendering Custom Button Props

Source: https://base-ui.com/react/components/checkbox-group

Shows how to use the 'render' prop to provide custom button properties within the CheckboxGroup component.

```jsx
render={(buttonProps) => (
    // Custom button rendering logic here
  )}
```

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

### Checkbox Root Props

Source: https://base-ui.com/react/components/checkbox

This section details the properties available for the root of the Checkbox component, including its ID, name, and other configuration options.

```APIDOC
## Checkbox.Root.Props

### Description
Properties for the root of the Checkbox component.

### Properties
- **id** (string) - Optional - The id of the input element.
- **name** (string) - Optional - Identifies the field
```

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

### Field Transition Status

Source: https://base-ui.com/react/components/field

Illustrates the transition status of a field component, which is represented as a string array.

```typescript
TransitionStatus
```

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

### Field Description Props

Source: https://base-ui.com/react/components/field

Defines the props for customizing the description of a field, including CSS class names and inline styles that can be dynamically applied based on the field's state.

```typescript
className?: string | ((state: Field.Description.State) => string | undefined);
 render?: ReactElement | ((props: HTMLProps, state: Field.Description.State) => ReactElement);
 style?:
 | React.CSSProperties
 | ((state: Field.Description.State) => React.CSSProperties | undefined);
```