Skip to main content
Available in Uniwind 1.3.0+

​
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. 
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: 
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"
/>
Booleans match both the boolean and string forms. For example, data-[selected=true] matches data-selected={true} and data-selected="true".

​
String Props

You can match arbitrary string values: 
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: 
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
Only equality selectors are supported (e.g., data-[prop=value]). Presence-only selectors like data-[prop] or other operators are not supported.

​
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

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

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>

Supported Class Names

Learn which utilities and variants are supported

Platform Selectors

Combine data selectors with platform variants