Skip to main content

Documentation Index

Fetch the complete documentation index at: https://copylabs.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

​
VisuallyHidden

VisuallyHidden is a utility component for hiding content visually while keeping it accessible to screen readers.

​
Import

import { VisuallyHidden } from 'radix-native-ui';

​
Usage

import { VisuallyHidden, IconButton } from 'radix-native-ui';

<IconButton>
  <Icon name="search" />
  <VisuallyHidden>Search</VisuallyHidden>
</IconButton>

​
Props

​
Examples

​
Icon Button Label

<IconButton>
  <Icon name="menu" />
  <VisuallyHidden>Open menu</VisuallyHidden>
</IconButton>

<VisuallyHidden>
  <Button onPress={() => mainContentRef.current?.focus()}>
    Skip to main content
  </Button>
</VisuallyHidden>

​
Form Labels

<Flex direction="column" gap={2}>
  <VisuallyHidden>
    <Text nativeID="search-label">Search</Text>
  </VisuallyHidden>
  <TextField
    placeholder="Search..."
    aria-labelledby="search-label"
  />
</Flex>

​
Status Messages

function StatusIndicator({ status }) {
  return (
    <Flex direction="row" gap={2} align="center">
      <Badge color={status === 'success' ? 'green' : 'red'}>
        {status === 'success' ? '✓' : '✗'}
      </Badge>
      <VisuallyHidden>
        <Text>{status === 'success' ? 'Operation successful' : 'Operation failed'}</Text>
      </VisuallyHidden>
    </Flex>
  );
}

​
Loading State

function LoadingButton({ loading, children, ...props }) {
  return (
    <Button {...props} disabled={loading}>
      {loading ? (
        <>
          <Spinner size={1} />
          <VisuallyHidden>Loading...</VisuallyHidden>
        </>
      ) : (
        children
      )}
    </Button>
  );
}

​
Accessible Icon

function AccessibleIcon({ label, children }) {
  return (
    <>
      {children}
      <VisuallyHidden>{label}</VisuallyHidden>
    </>
  );
}

// Usage
<AccessibleIcon label="Warning">
  <Icon name="warning" color="yellow" />
</AccessibleIcon>

​
Table Headers

<Table.Root>
  <Table.Header>
    <Table.Row>
      <Table.ColumnHeaderCell>Name</Table.ColumnHeaderCell>
      <Table.ColumnHeaderCell>
        <VisuallyHidden>Actions</VisuallyHidden>
      </Table.ColumnHeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    {/* ... */}
  </Table.Body>
</Table.Root>

​
Live Region

function LiveAnnouncer({ message }) {
  return (
    <VisuallyHidden>
      <Text aria-live="polite">{message}</Text>
    </VisuallyHidden>
  );
}

// Usage
<LiveAnnouncer message="Item added to cart" />