> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# TextDirectionProvider

> Coordinate directional keyboard and pointer interactions with the document direction.

export const StoryEmbed = ({storyId, title, height = 240}) => <>
    <Tabs>
      <Tab title="Light">
        <iframe title={`${title} (light)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:light`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
      <Tab title="Dark">
        <iframe title={`${title} (dark)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:dark`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

`TextDirectionProvider` supplies `ltr` or `rtl` direction to Twenty UI controls. It does not render a DOM element or set an HTML `dir` attribute. Set both the provider direction and the matching document direction.

<StoryEmbed storyId="ui-input-segmentedcontrol--right-to-left" title="TextDirectionProvider example" />

## Usage

```tsx theme={null}
import { SegmentedControl } from 'twenty-ui/primitives/input';
import { TextDirectionProvider } from 'twenty-ui/primitives/layout';

type DirectionalChoicesProps = { direction: 'ltr' | 'rtl' };

export const DirectionalChoices = ({ direction }: DirectionalChoicesProps) => (
  <TextDirectionProvider direction={direction}>
    <div dir={direction}>
      <SegmentedControl
        aria-label="Billing period"
        defaultValue="annual"
        options={[
          { label: 'Annual', value: 'annual' },
          { label: 'Monthly', value: 'monthly' },
        ]}
      />
    </div>
  </TextDirectionProvider>
);
```

The host application supplies translated labels and chooses the direction. Direction context affects directional interactions; the HTML attribute handles text and layout. For example, [SegmentedControl](/ui/primitives/input/segmented-control) reverses horizontal arrow navigation, and [ResizeHandle](/ui/primitives/layout/resize-handle) reverses horizontal resizing.

## Scope and state

Place one provider around the controls that share a direction. Nested providers can override the direction for a subtree; pair each override with a matching `dir` attribute. `direction` is a required application-owned prop, with no uncontrolled mode. The provider does not translate content or choose direction from the locale automatically.

## Props

<ParamField body="children" type="ReactNode" required>
  Controls that receive the direction context.
</ParamField>

<ParamField body="direction" type="&#x22;ltr&#x22; | &#x22;rtl&#x22;" required>
  Reading direction used by directional interactions. Also set the matching HTML `dir` attribute on the content.
</ParamField>