Telegram UI

https://tgui.xelene.me
Admin
Telegram UI is a React component library designed for building applications within the Telegram...
Tokens:12,374
Snippets:169
Trust Score:5
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install Telegram UI with npm

Source: https://tgui.xelene.me/

Use this command to install Telegram UI via npm.

```bash
npm install @toptal/telegram-ui
```

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

### Install Telegram UI with yarn

Source: https://tgui.xelene.me/

Use this command to install Telegram UI via yarn.

```bash
yarn add @toptal/telegram-ui
```

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

### Telegram UI Usage Example

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fgetting-started--documentation

A comprehensive example demonstrating the integration of Telegram UI components. It includes importing styles, using AppRoot, and rendering a List with Sections and Cells.

```javascript
// Import the necessary styles globally
import '@telegram-apps/telegram-ui/dist/styles.css';

// Import components from the library
import { AppRoot, Cell, List, Section } from '@telegram-apps/telegram-ui';

// Example data for rendering list cells
const cellsTexts = ['Chat Settings', 'Data and Storage', 'Devices'];

export const App = () => (
  <AppRoot>
    {/* List component to display a collection of items */}
    <List>
      {/* Section component to group items within the list */}
      <Section header="Header for the section" footer="Footer for the section">
        {/* Mapping through the cells data to render Cell components */}
        {cellsTexts.map((cellText, index) => (
          <Cell key={index}>
            {cellText}
          </Cell>
        ))}
      </Section>
    </List>
  </AppRoot>
);
```

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

### Form Multiselect - Create Option In Input

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fform-multiselect--documentation

This example shows how to enable the creatable functionality for the Form Multiselect component, allowing users to add new options on the fly by pressing Enter or clicking a designated button.

```APIDOC
## Form Multiselect - Create Option In Input

### Description
Enables users to create new options directly within the multiselect input. This is useful when the available options are dynamic or user-defined.

### Props

#### Creatable Props
- **creatable** (boolean | string) - Required for this functionality. Defaults to `false`. 
  - If `true`, new options can be created by pressing Enter after typing.
  - If a `string` is provided, it will be displayed as a button in the dropdown to create a new option.

### Usage
Set the `creatable` prop to `true` or a descriptive string to enable this feature. The `onChange` callback will receive the newly created option along with the existing ones.
```

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

### Form Multiselect - Pick from existed options

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fform-multiselect--documentation

This example demonstrates the basic usage of the Form Multiselect component, allowing users to select from a predefined list of options. The dropdown closes automatically after an option is selected.

```APIDOC
## Form Multiselect - Pick from existed options

### Description
Allows users to select multiple options from a predefined list. The dropdown can be configured to close after each selection.

### Props

#### Core Props
- **options*** (MultiselectOption[]) - Required - The list of available options.
- **value*** (MultiselectOption[]) - Required - The currently selected options.
- **onChange** ((options: MultiselectOption[]) => void) - Callback fired when the selected options change.

#### Behavior Props
- **closeDropdownAfterSelect** (boolean) - Optional - Defaults to `false`. If `true`, the dropdown closes after an option is selected.
- **selectedBehavior** ("hide" | "highlight") - Optional - Defaults to `hide`. Determines if selected options are hidden or highlighted in the dropdown.

#### Customization Props
- **renderOption** (ForwardRefExoticComponent<CellProps & RefAttributes<unknown>>) - Optional - Custom render function for each option.
- **renderChip** ((props: ChipProps) => Element) - Optional - Custom function to render the selected option chips.

#### State Props
- **inputValue** (string) - Optional - Controls the current value of the input field.
- **defaultValue** (MultiselectOption[]) - Optional - The default selected options when the component is uncontrolled.

#### Filtering and Input Props
- **filterFn** (false | FilterFn) - Optional - Custom function for filtering options.
- **onInputChange** ((event: ChangeEvent<HTMLInputElement>) => void) - Optional - Callback fired when the input value changes.
- **emptyText** (string) - Optional - Text displayed when no options are available or match the filter.

#### Creatable Props
- **creatable** (boolean | string) - Optional - Defaults to `false`. If `true`, allows creating new options by pressing Enter. If a string, it's used as the text for a "create" button.

#### Layout Props
- **header** (ReactNode) - Optional - Content to display as a header above the input.
- **before** (ReactNode) - Optional - Content to display before the form input.

#### State Indicator
- **status** ("default" | "error" | "focused") - Optional - Defines the visual state of the form input.
```

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

### Breadcrumbs Component Example

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fnavigation-breadcrumbs--documentation

Displays a navigation trail with customizable dividers. Use this to show users their current location within a site hierarchy.

```jsx
import { Breadcrumbs, BreadcrumbsItem } from '@amaui/ui-react'

<Breadcrumbs divider="dot">
  <BreadcrumbsItem>Home</BreadcrumbsItem>
  <BreadcrumbsItem>Documentation</BreadcrumbsItem>
  <BreadcrumbsItem>Navigation</BreadcrumbsItem>
  <BreadcrumbsItem>Breadcrumbs</BreadcrumbsItem>
</Breadcrumbs>
```

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

### FormSwitch Component

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fform-switch--documentation

This component wraps an input of type checkbox. See usage examples on the With Cell page.

```javascript
import { FormSwitch } from "@/components/form/switch";

<FormSwitch defaultChecked={true} />
```

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

### Subheadline with Custom Component

Source: https://tgui.xelene.me/?path=%2Fdocs%2Ftypography-subheadline--documentation

Demonstrates how to change the rendered HTML tag or component using the `Component` prop. By default, Subheadline renders as a `span`, but this example shows it rendering as an `h6`.

```javascript
import {
	Subheadline,
} from "@/components/ui/subheadline";

<Subheadline Component='h6'>Subheadline as h6</Subheadline>
```

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

### Caption Component Usage

Source: https://tgui.xelene.me/?path=%2Fdocs%2Ftypography-caption--documentation

Demonstrates the basic usage of the Caption component with different levels and font weights. Ensure the component is imported before use.

```javascript
import { Caption } from "@/components/ui/typography";

<Caption level="1">Caption 1 · Regular</Caption>
<Caption level="1" weight="semibold">Caption 1 · Semibold</Caption>
<Caption level="1" weight="bold">Caption 1 · Bold</Caption>
```

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

### Multiselect with Creatable Options

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fform-multiselect--documentation

Shows how to enable the creation of new options within the Multiselect component. Users can type new values and press Enter to add them as options.

```javascript
import React from 'react';
import { Multiselect, MultiselectOption } from '@telegram-apps/telegram-ui';

const options: MultiselectOption[] = [
  { label: 'Existing Option 1', value: 'existing1' },
  { label: 'Existing Option 2', value: 'existing2' },
];

export const CreatableMultiselect: React.FC = () => {
  const [value, setValue] = React.useState<MultiselectOption[]>([]);
  const [inputValue, setInputValue] = React.useState('');

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(event.target.value);
  };

  const handleValueChange = (newValue: MultiselectOption[]) => {
    setValue(newValue);
  };

  return (
    <Multiselect
      options={options}
      value={value}
      onChange={handleValueChange}
      inputValue={inputValue}
      onInputChange={handleInputChange}
      creatable={true}
    />
  );
};
```

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

### Wrap Application with AppRoot

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fgetting-started--documentation

Wrap your main application component with AppRoot to enable Telegram UI's platform features. This is a required step for using the library.

```javascript
import { AppRoot } from '@telegram-apps/telegram-ui';

ReactDOM.render(
  <AppRoot>
    <App />
  </AppRoot>,
  document.getElementById('root')
);
```

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

### Wrap App with AppRoot

Source: https://tgui.xelene.me/

Wrap your application with AppRoot to enable Telegram UI's platform features. This is a required step for using the library.

```javascript
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import AppRoot from '@toptal/telegram-ui/AppRoot';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <AppRoot>
      <App />
    </AppRoot>
  </React.StrictMode>
);
```

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

### Multiselect with Existing Options

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fform-multiselect--documentation

Demonstrates how to use the Multiselect component to pick from a predefined list of options. The dropdown closes automatically after an option is selected.

```javascript
import React from 'react';
import { Multiselect, MultiselectOption } from '@telegram-apps/telegram-ui';

const options: MultiselectOption[] = [
  { label: 'Option 1', value: 'opt1' },
  { label: 'Option 2', value: 'opt2' },
  { label: 'Option 3', value: 'opt3' },
];

export const MyMultiselect: React.FC = () => {
  const [value, setValue] = React.useState<MultiselectOption[]>([]);

  return (
    <Multiselect
      options={options}
      value={value}
      onChange={setValue}
      closeDropdownAfterSelect={true}
    />
  );
};
```

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

### Import Telegram UI Styles

Source: https://tgui.xelene.me/

Import the necessary styles for Telegram UI before development. This ensures all components are styled correctly.

```javascript
import '@toptal/telegram-ui/dist/styles.css';
```

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

### Chip with After Content

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fform-chip--documentation

Demonstrates how to render a Chip with content positioned after the main text, such as an action icon. Supports 'elevated', 'mono', and 'outline' modes.

```jsx
import { Chip } from '@telegram-apps/telegram-ui';

<Chip after={<Icon name="close" />} mode="elevated">
  Elevated
</Chip>
<Chip after={<Icon name="close" />} mode="mono">
  Mono
</Chip>
<Chip after={<Icon name="close" />} mode="outline">
  Outline
</Chip>
```

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

### Subheadline Component Usage

Source: https://tgui.xelene.me/?path=%2Fdocs%2Ftypography-subheadline--documentation

Demonstrates basic usage of the Subheadline component. It renders text as a secondary heading, with options for different sizes and weights.

```javascript
import {
	Subheadline,
} from "@/components/ui/subheadline";

<Subheadline>This is a subheadline</Subheadline>
```

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

### Import Telegram UI Styles

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fgetting-started--documentation

Import the global styles for Telegram UI before using any components. This ensures consistent styling across your application.

```javascript
import '@telegram-apps/telegram-ui/dist/styles.css';
```

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

### Chip with Before Content

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fform-chip--documentation

Illustrates rendering a Chip with content preceding the main text, like an icon or avatar. Available in 'elevated', 'mono', and 'outline' visual styles.

```jsx
import { Chip } from '@telegram-apps/telegram-ui';

<Chip before={<Icon name="checkmark" />} mode="elevated">
  Elevated
</Chip>
<Chip before={<Icon name="checkmark" />} mode="mono">
  Mono
</Chip>
<Chip before={<Icon name="checkmark" />} mode="outline">
  Outline
</Chip>
```

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

### Basic Form Textarea

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fform-textarea--documentation

Demonstrates the basic usage of the Form Textarea component. This component wraps a standard HTML textarea within a FormInput container, applying custom styles and functionality.

```typescript
import {
	FormInput,
	Textarea,
} from "@/components/ui";

export const FormTextarea = () => (
	<FormInput header="Textarea">
		<Textarea />
	</FormInput>
);
```

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

### FixedLayout with Top Vertical Alignment

Source: https://tgui.xelene.me/?path=%2Fdocs%2Flayout-fixedlayout--documentation

Demonstrates the FixedLayout component configured for top vertical alignment. This is useful for headers.

```javascript
import { FixedLayout } from '@vkontakte/vkui';

<FixedLayout vertical="top">
  <div>This is FixedLayout with top vertical</div>
</FixedLayout>
```

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

### Checkbox Component Usage

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fform-checkbox--documentation

Demonstrates the basic structure and properties of the Checkbox component. The 'indeterminate' property allows for a third state.

```javascript
import { Checkbox } from '@vkontakte/vkui';

<Checkbox defaultChecked>Default checked</Checkbox>
<Checkbox indeterminate>Indeterminate</Checkbox>
```

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

### Caption Component with Uppercase

Source: https://tgui.xelene.me/?path=%2Fdocs%2Ftypography-caption--documentation

Shows how to use the 'caps' prop to render the caption text in uppercase. This is useful for stylistic emphasis.

```javascript
import { Caption } from "@/components/ui/typography";

<Caption level="2" caps>
  Caption 2 · Uppercase
</Caption>
```

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

### Text Component Variants

Source: https://tgui.xelene.me/?path=%2Fdocs%2Ftypography-text--documentation

Demonstrates different font weights available for the Text component: Regular, Semibold, and Bold.

```text
Text · Regular  
  
Text · Semibold  
  
Text · Bold
```

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

### Image Component Basic Usage

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fblocks-image--documentation

Renders an image with a specified source. The component handles loading states and errors automatically.

```jsx
import { Image } from "@/components/ui/image";

<Image src="https://avatars.githubusercontent.com/u/84640980?v=4" />
```

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

### FormSelect Component Usage

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fform-select--documentation

Demonstrates the basic usage of the FormSelect component, typically used within a form. It accepts children, which are usually option elements.

```jsx
          <FormSelect>
            <option>Hello</option>
            <option>Okay</option>
          </FormSelect>
```

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

### Subheadline with Plain Prop

Source: https://tgui.xelene.me/?path=%2Fdocs%2Ftypography-subheadline--documentation

Illustrates the use of the `plain` prop, which removes default margins around the text. This is useful for inline styling or custom layouts where precise spacing is needed.

```javascript
import {
	Subheadline,
} from "@/components/ui/subheadline";

<Subheadline plain>Inline subheadline</Subheadline>
```

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

### Pagination Component Properties

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fnavigation-pagination--documentation

This section details the properties available for the Pagination component, including their types, descriptions, and default values.

```APIDOC
## Pagination Component API

### Description
The Pagination component displays a set of navigation controls allowing users to navigate through pages of content. It is built on top of a custom hook that manages pagination logic and state. This component can be customized to hide next/previous buttons, specify boundary and sibling count for pagination items, and handle page changes through an `onChange` callback.

### Properties

| Name | Description | Default | Control |
|---|---|---|---|
| disabled | Controls whether the Pagination component is interactive. | - | Set boolean |
| boundaryCount | Number of always visible pages at the beginning and end. | - | Set number |
| count | The total number of pages. | - | Set number |
| defaultPage | The page selected by default when the component is uncontrolled. | - | Set number |
| hideNextButton | If `true`, hide the next-page button. | - | Set boolean |
| hidePrevButton | If `true`, hide the previous-page button. | - | Set boolean |
| onChange | Callback fired when the page is changed. | - | ((event: ChangeEvent<unknown>, page: number) => void) |
| page | The current page. | - | Set number |
| siblingCount | Number of always visible pages before and after the current page. | - | Set number |
```

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

### Image Component with Custom Size

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fblocks-image--documentation

Specifies the size of the image using the 'size' prop. Sizes are defined in pixels, with a default of 40.

```jsx
import { Image } from "@/components/ui/image";

<Image src="https://avatars.githubusercontent.com/u/84640980?v=4" size={96} />
```

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

### FixedLayout with Default Vertical Alignment

Source: https://tgui.xelene.me/?path=%2Fdocs%2Flayout-fixedlayout--documentation

Demonstrates the FixedLayout component with its default vertical alignment, which is 'bottom'. This is useful for footers.

```javascript
import { FixedLayout } from '@vkontakte/vkui';

<FixedLayout>
  <div>This is FixedLayout with default vertical</div>
</FixedLayout>
```

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

### Form Textarea with Status

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fform-textarea--documentation

Shows how to apply different status styles (e.g., 'error', 'focused') to the Form Textarea component. This allows for visual feedback on the input's state.

```typescript
import {
	FormInput,
	Textarea,
} from "@/components/ui";

export const FormTextarea = () => (
	<FormInput header="Textarea" status="error">
		<Textarea />
	</FormInput>
);
```

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

### Slider Component API

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fform-slider--documentation

API documentation for the Slider component, detailing its properties and their usage.

```APIDOC
## Slider Component API

### Description
Provides an interface for configuring and using the Slider component.

### Properties

#### `multiple`
* **Type**: `boolean`
* **Description**: Enables single-thumb mode. If `true`, enables multiple-thumb mode for range selection.
* **Default**: `-`

#### `value`
* **Type**: `number` or `[number, number]`
* **Description**: The current value of the slider. Expects a single number for single-thumb mode or a tuple `[start, end]` for range selection.
* **Default**: `-`

#### `defaultValue`
* **Type**: `number` or `[number, number]`
* **Description**: Default value of the slider. Expects a single number or a tuple `[start, end]`.
* **Default**: `-`

#### `onChange`
* **Type**: `(value: number, event: TouchEvent | ChangeEvent<Element>) => void` or `(value: [number, number], event: TouchEvent | ChangeEvent<Element>) => void`
* **Description**: Callback function invoked when the slider's value changes.
* **Default**: `-`

#### `min`
* **Type**: `number`
* **Description**: The minimum allowed value for the slider.
* **Default**: `0`

#### `max`
* **Type**: `number`
* **Description**: The maximum allowed value for the slider.
* **Default**: `100`

#### `step`
* **Type**: `number`
* **Description**: The step value for each movement of the slider thumbs.
* **Default**: `1`

#### `disabled`
* **Type**: `boolean`
* **Description**: Indicates whether the slider is disabled and cannot be interacted with.
* **Default**: `false`

#### `before`
* **Type**: `ReactNode`
* **Description**: Content to be rendered before the slider track.
* **Default**: `-`

#### `after`
* **Type**: `ReactNode`
* **Description**: Content to be rendered after the slider track.
* **Default**: `-`

#### `getAriaLabel`
* **Type**: `(index: number) => string`
* **Description**: A function that provides a way to generate dynamic `aria-label` based on the slider's thumb index.
* **Default**: `-`

#### `getAriaValueText`
* **Type**: `(value: number, index: number) => string`
* **Description**: A function that provides a way to customize the `aria-valuetext` for more flexible text representation based on the slider's value and thumb index.
* **Default**: `-`
```

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

### FormRating Component with Custom Icon

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fform-rating--documentation

Demonstrates how to use the FormRating component with a custom SVG icon. The IconContainer prop accepts an ElementType that renders the rating icons.

```javascript
import { Rating } from "@/components/ui/form/rating";

<Rating
  IconContainer={(
    props: Icon
  ) => (
    <svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path d="M16.228 9.993c1.166-3.164 1.75-4.746 2.598-5.199a2.492 2.492 0 0 1 2.348 0c.849.453 1.432 2.035 2.598 5.199l.562 1.525c.337.914.506 1.372.796 1.715.257.303.58.54.945.694.413.173.895.194 1.86.235l1.608.07c3.338.143 5.006.215 5.694.89a2.56 2.56 0 0 1 .726 2.258c-.164.955-1.472 2.005-4.088 4.104l-1.262 1.011c-.756.607-1.134.91-1.367 1.296-.206.34-.33.725-.361 1.123-.036.45.094.92.353 1.86l.432 1.568c.896 3.253 1.345 4.88.921 5.75a2.518 2.518 0 0 1-1.9 1.395c-.949.137-2.34-.796-5.124-2.663l-1.341-.9c-.805-.54-1.207-.809-1.642-.914a2.488 2.488 0 0 0-1.168 0c-.435.105-.837.375-1.642.914l-1.341.9c-2.783 1.867-4.175 2.8-5.124 2.663a2.518 2.518 0 0 1-1.9-1.396c-.424-.87.025-2.496.921-5.749l.432-1.568c.26-.94.389-1.41.353-1.86a2.563 2.563 0 0 0-.361-1.123c-.233-.386-.611-.689-1.367-1.296l-1.262-1.011c-2.616-2.1-3.924-3.149-4.088-4.104a2.56 2.56 0 0 1 .726-2.258c.688-.675 2.356-.747 5.694-.89l1.608-.07c.965-.041 1.447-.062 1.86-.235.364-.153.688-.391.945-.694.29-.343.459-.8.796-1.715l.562-1.525Z" fill="currentColor" opacity=".8" />
    </svg>
  )}
/>
```

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

### PinInput Component

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fform-pininput--documentation

The PinInput component renders a set of input fields for entering pin codes. It includes a virtual keypad for value entry and deletion, and supports biometric authentication.

```APIDOC
## PinInput

Renders a set of input fields for entering pin codes with a virtual keypad for value entry and deletion.

### Props

- **label** (string) - Text label displayed above the pin input cells. Default: "Enter your pin"
- **pinCount** (number) - The number of pin input fields to display, with a minimum of 2. Default: 4
- **value** (number[]) - The initial pin values to populate the input fields with. Default: -
- **onChange** (((value: number[]) => void)) - Callback function triggered when the pin values change. Default: -
- **onBiometricAuth** (() => void) - Callback function triggered when the biometric authentication button is clicked. Default: -
- **biometricType** (string) - Type of biometric authentication to display. If undefined, no biometric button will be shown. Possible values: "faceid", "fingerprint". Default: -
```

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

### Subheadline with Custom Level and Weight

Source: https://tgui.xelene.me/?path=%2Fdocs%2Ftypography-subheadline--documentation

Shows how to customize the Subheadline's size using the `level` prop and its font weight using the `weight` prop. The `level` prop controls the size, with '1' being the default and '2' being smaller. The `weight` prop accepts values from '1' (light) to '3' (bold).

```javascript
import {
	Subheadline,
} from "@/components/ui/subheadline";

<Subheadline level={2} weight={3}>
  Subheadline 2 - Bold
</Subheadline>
```

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

### Checkbox with Cell Integration

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fform-checkbox--documentation

Shows how to integrate the Checkbox component with a Cell to make the entire cell clickable, improving user experience. This is useful for list items where the checkbox is associated with a label.

```javascript
import { Cell, Checkbox } from '@vkontakte/vkui';

<Cell before={<Checkbox />}>Apples</Cell>
<Cell before={<Checkbox />} checked>Milk</Cell>
```

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

### Multiselectable Checkbox with Cell

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fform-multiselectable--documentation

Demonstrates how to use the Multiselectable component within a Cell, making the label clickable. This is useful for creating interactive list items.

```tsx
import {
	Cell, Multiselect,
	type MultiselectProps
} from "@/components/ui/primitives/form/multiselectable";

export const MultiselectInCell = (props: MultiselectProps) => (
	<Cell
		component="label"
		before={<Multiselect {...props} />}
		subtitle="This is a subtitle"
		after="After"
	>
		Label
	</Cell>
);
```

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

### Chip with Radio Button Before

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fform-chip--documentation

Shows a Chip component configured with a radio button placed before the main text. This variant is available in 'elevated', 'mono', and 'outline' modes.

```jsx
import { Chip, Radio } from '@telegram-apps/telegram-ui';

<Chip before={<Radio checked={true} />} mode="elevated">
  Elevated
</Chip>
<Chip before={<Radio checked={true} />} mode="mono">
  Mono
</Chip>
<Chip before={<Radio checked={true} />} mode="outline">
  Outline
</Chip>
```

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

### FormSelectable with Cell

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fform-selectable--documentation

Demonstrates how to use FormSelectable with the Cell component to create clickable labels for radio buttons. This pattern ensures better user experience by allowing users to click on the label text to select the radio option.

```tsx
import {
	Cell,
	FormSelectable,
} from "@/components/ui/Form";

export const WithCell = () => (
	<div class="flex flex-col gap-3">
		<Cell
			component='label'
			before={<FormSelectable name="radio" value="1" />}
		>First radio</Cell>
		<Cell
			component='label'
			before={<FormSelectable name="radio" value="2" />}
		>Second radio</Cell>
	</div>
);
```

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

### FileInput Component

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fform-fileinput--documentation

Renders a file input disguised as a button. It leverages the ButtonCell component for consistent styling. This component includes only the logic for the input and label.

```typescript
/**
 * Renders a file input disguised as a button, enhancing the user interface and improving usability.
 * It leverages the `ButtonCell` component for consistent styling across the application.
 */
export const FileInput = (
  props: FileInputProps
) => {
  const {
    label,
    // ... other props
  } = props;

  return (
    <ButtonCell
      // ... other props
      beforeContent={<Icon name="attach" />}
      afterContent={label}
    />
  );
};
```

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

### Breadcrumbs with Different Dividers

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fnavigation-breadcrumbs--documentation

Demonstrates the use of different divider types ('dot', 'slash', 'chevron') for the Breadcrumbs component. Choose a divider that matches your design system.

```jsx
<Breadcrumbs divider="slash">
  <BreadcrumbsItem>Home</BreadcrumbsItem>
  <BreadcrumbsItem>Documentation</BreadcrumbsItem>
  <BreadcrumbsItem>Navigation</BreadcrumbsItem>
  <BreadcrumbsItem>Breadcrumbs</BreadcrumbsItem>
</Breadcrumbs>

<Breadcrumbs divider="chevron">
  <BreadcrumbsItem>Home</BreadcrumbsItem>
  <BreadcrumbsItem>Documentation</BreadcrumbsItem>
  <BreadcrumbsItem>Navigation</BreadcrumbsItem>
  <BreadcrumbsItem>Breadcrumbs</BreadcrumbsItem>
</Breadcrumbs>
```

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

### FormSwitch with Cell Component

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fform-switch--documentation

Pass the 'label' prop to the Cell component to make the FormSwitch clickable.

```javascript
import { Cell } from "@/components/cell";
import { FormSwitch } from "@/components/form/switch";

<Cell label="First radio">
  <FormSwitch />
</Cell>
```

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

### Subheadline with Caps Prop

Source: https://tgui.xelene.me/?path=%2Fdocs%2Ftypography-subheadline--documentation

Shows the `caps` prop, which transforms the text to uppercase for stylistic emphasis. This can be combined with other props like `level` and `weight`.

```javascript
import {
	Subheadline,
} from "@/components/ui/subheadline";

<Subheadline caps level={2} weight={2}>
  Uppercase Subheadline
</Subheadline>
```

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

### Snackbar Component

Source: https://tgui.xelene.me/?path=%2Fdocs%2Ffeedback-snackbar--documentation

The Snackbar component displays a brief message at the bottom of the screen. It can include actions and other content, and automatically dismisses after a set duration.

```APIDOC
## Snackbar

Displays a brief message at the bottom of the screen, which can contain actions and other content. It automatically dismisses after a set duration, providing feedback or interaction prompts to users.

### Props

- **before** (ReactNode) - Optional - Element or component to be displayed on the left side of the snackbar.
- **description** (ReactNode) - Optional - Additional content displayed below the main message. Defaults to 'Restore the message within 4 seconds'.
- **children** (ReactNode) - Required - The main content of the snackbar, typically text or a message. Defaults to 'Message deleted'.
- **after** (ReactNode) - Optional - Element or component to be displayed on the right side of the snackbar.
- **link** (ReactElement<LinkProps, string | JSXElementConstructor<any>>) - Optional - A link component to be included in the snackbar for user interaction.
- **duration** (number) - Optional - The duration in milliseconds after which the snackbar will automatically close. Defaults to 4000.
- **onClose** ( () => void ) - Required - Callback function invoked when the snackbar is closed.
```

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

### Image Component with Children

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fblocks-image--documentation

Renders additional content within the image component's container by passing children. This is useful for overlays or badges.

```jsx
import { Image } from "@/components/ui/image";
import { Badge } from "@/components/ui/badge";

<Image src="https://avatars.githubusercontent.com/u/84640980?v=4">
  <Badge className="absolute bottom-2 left-2">42</Badge>
</Image>
```

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

### Image Component with Fallback Icon

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fblocks-image--documentation

Displays a fallback icon when the image fails to load or the src attribute is not provided. Ensure the fallbackIcon prop is set to a valid ReactNode.

```jsx
import { Image } from "@/components/ui/image";
import { IconExclamationMark } from "@tabler/icons-react";

<Image src="invalid-src" fallbackIcon={<IconExclamationMark />} />
```

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

### Form Radio Component

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fform-radio--documentation

Renders a custom radio button, visually hiding the actual input while displaying custom icons for unchecked and checked states. It supports all standard properties and events of an HTML input element of type 'radio'.

```javascript
This component wraps input with type=radio, see usage example on the With Cell page
```

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

### Disabled Form Textarea

Source: https://tgui.xelene.me/?path=%2Fdocs%2Fform-textarea--documentation

Illustrates how to disable the Form Textarea component. When disabled, the textarea will not be editable and will typically have a visual indicator of its disabled state.

```typescript
import {
	FormInput,
	Textarea,
} from "@/components/ui";

export const FormTextarea = () => (
	<FormInput header="Textarea" disabled>
		<Textarea disabled />
	</FormInput>
);
```
Tokens:
Raw