# LanguageSwitcher.Option

Canonical page: https://docs.ovok.com/native-sdk/guide/components/language-switcher/language-switcher-option

A touchable option component for individual language selection. Provides context for its child components and handles selection state, styling, and interaction feedback with Material Design 3 theming.

## Basic Example [#basic-example]

```typescript
import { LanguageSwitcher } from "@ovok/native";
import * as React from "react";

const BasicLanguageSwitcherOption = () => (
  // This component needs to be wrapped in a LanguageSwitcher component to work
  <LanguageSwitcher selectedLanguage="en_US" onLanguageChange={() => {}}>
    <LanguageSwitcher.Option value="en_US">
      <LanguageSwitcher.Option.RadioButton />
      <LanguageSwitcher.Option.Label>English</LanguageSwitcher.Option.Label>
    </LanguageSwitcher.Option>
  </LanguageSwitcher>
);

export default BasicLanguageSwitcherOption;
```

## Props [#props]

Every prop, with its type and description, is listed in the [`@ovok/native/language-switcher` API reference](/native-sdk/reference/language-switcher).

## Compound Components [#compound-components]

- [**`LanguageSwitcher.Option.RadioButton`**](/native-sdk/guide/components/language-switcher/radio-button/) - Radio button selection control
- [**`LanguageSwitcher.Option.Label`**](/native-sdk/guide/components/language-switcher/label/) - Language name display component
- [**`LanguageSwitcher.Option.Flag`**](/native-sdk/guide/components/language-switcher/flag/) - Flag display component

## Component Behavior [#component-behavior]

### Selection Logic [#selection-logic]

- Compares own `value` prop with parent's `selectedLanguage`
- Automatically manages visual selection state
- Triggers parent `onLanguageChange` when pressed
- Provides selection context to child components

### Visual States [#visual-states]

- **Selected**: Primary border color and background emphasis
- **Unselected**: Disabled border color and transparent background
- **Pressed**: Touch opacity feedback for interaction
- **Disabled**: Reduced opacity and disabled interactions

## Styling [#styling]

### Theme Colors Used [#theme-colors-used]

- `theme.colors.primary` - Selected border color
- `theme.colors.onSurfaceDisabled` - Unselected border color
- `theme.colors.surface` - Background color
- `theme.spacing(2)` - Internal gap and padding (8px default)
- `theme.borderRadius(2)` - Corner radius (8px default)