Data Selectors

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

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.

Tailwind 4.3.3 and newer emit flattened variant selectors instead of nested ones. Data selectors compiled by these Tailwind versions need Uniwind 1.12.0+ or Uniwind Pro 1.7.0+. On older Uniwind versions, the variant is ignored and the style applies unconditionally.

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>

Related

Supported Class Names

Learn which utilities and variants are supported

Platform Selectors

Combine data selectors with platform variants