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

# Data Selectors

> Style components based on prop values using data-[...] variants

<Badge>Available in Uniwind 1.3.0+</Badge>

## Overview

Data selectors let you conditionally apply styles based on a component’s props using Tailwind-style variants. This mirrors the familiar `data-[state=open]:...` pattern from Tailwind v4 and allows React Native components to react to their own prop values.

## Basic Usage

Use the `data-[prop=value]` variant with your classes. The name inside the brackets maps to a `data-<prop>` prop on the same component.

```tsx theme={null}
import { View } from 'react-native'

// Use your own data-* props on React Native components
<View
  data-state={isOpen ? 'open' : 'closed'}
  className="p-4 rounded border data-[state=open]:bg-muted/50 data-[state=closed]:bg-transparent"
/>
```

* Inside brackets, use the name without the `data-` prefix (e.g., `state` targets the `data-state` prop)
* The utility applies only when the prop equals the given value

## Boolean Props

For boolean props, compare to `true` or `false`:

```tsx theme={null}
import { View } from 'react-native'

<View
  data-selected={isSelected}
  className="border border-input rounded px-3 py-2 data-[selected=true]:ring-2 data-[selected=true]:ring-ring"
/>
```

<Tip>
  Booleans match both the boolean and string forms. For example, `data-[selected=true]` matches `data-selected={true}` and `data-selected="true"`.
</Tip>

## String Props

You can match arbitrary string values:

```tsx theme={null}
import { View } from 'react-native'

// Match a specific value on your own data-* prop
<View
  data-state={isOpen ? 'open' : 'closed'}
  className="data-[state=open]:bg-muted/50 data-[state=closed]:bg-transparent"
/>
```

## Multiple Variants

Chain multiple data selectors to target different prop states:

```tsx theme={null}
import { View } from 'react-native'

<View
  data-status={status}      // 'success' | 'warning' | 'error'
  data-size={size}          // 'sm' | 'md' | 'lg'
  className="
    data-[status=success]:bg-green-500 data-[status=success]:text-white
    data-[status=warning]:bg-yellow-500 data-[status=warning]:text-black
    data-[status=error]:bg-red-500 data-[status=error]:text-white
    data-[size=sm]:px-2 data-[size=sm]:py-0.5
    data-[size=md]:px-3 data-[size=md]:py-1
    data-[size=lg]:px-4 data-[size=lg]:py-1.5
  "
/>
```

## How It Works

* During build, Uniwind recognizes attribute selectors generated by variants like `data-[prop=value]:...` and records them as data constraints for the corresponding class
* At runtime, when resolving a component’s `className`, Uniwind compares the component’s props against those constraints and only applies the matching styles
* Styles that depend on data selectors are evaluated against props and are not cached across prop changes

## Supported Syntax

* Equality checks: `data-[prop=value]:utility`
* Boolean checks: `data-[prop=true]` and `data-[prop=false]`
* Multiple different data selectors can be used on the same className string

<Warning>
  Only equality selectors are supported (e.g., `data-[prop=value]`). Presence-only selectors like `data-[prop]` or other operators are not supported.
</Warning>

## Best Practices

* Prefer semantic prop names (e.g., `state`, `status`, `variant`, `disabled`) to keep selectors readable
* Keep variant logic close to the component whose props drive the state
* Use data selectors for prop-driven state; use interactive variants for interaction states when available

## Examples

### Tabs

```tsx theme={null}
import { Pressable, Text } from 'react-native'

<Pressable
  data-selected={route.key === current}
  className="
    px-4 py-2 rounded-md text-foreground/60
    data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground
  "
>
  <Text>{route.title}</Text>
</Pressable>
```

### Toggle

```tsx theme={null}
import { Pressable, View } from 'react-native'

<Pressable
  data-checked={enabled}
  className="
    h-6 w-10 rounded-full bg-muted
    data-[checked=true]:bg-primary
  "
>
  <View
    className="h-5 w-5 rounded-full bg-background translate-x-0 data-[checked=true]:translate-x-4"
  />
</Pressable>
```

## Related

<CardGroup cols={2}>
  <Card title="Supported Class Names" icon="table" href="/class-names">
    Learn which utilities and variants are supported
  </Card>

  <Card title="Platform Selectors" icon="react" href="/api/platform-select">
    Combine data selectors with platform variants
  </Card>
</CardGroup>