Display@knitui/components
VisuallyHidden
VisuallyHidden renders content that is invisible on screen but remains fully available to assistive technology (screen readers, VoiceOver, TalkBack). On web the standard sr-only clip technique is used; on native the node collapses to ~0 layout impact while staying in the accessibility tree. Use it to add screen-reader-only labels, descriptions, or announcements without affecting visual layout.
import { VisuallyHidden } from "@knitui/components";Playground
Loading playground…
<VisuallyHidden>
Screen reader only text
</VisuallyHidden>Examples
Hidden From Sight
Demonstrates that content is present in the DOM even though it is invisible; inspect the element to confirm.
Loading example…
Icon Button Label
An icon-only button pattern: the visible icon is accompanied by a VisuallyHidden label for screen readers.
Loading example…
With Id
Forwarding an id attribute so the hidden text can be referenced via aria-labelledby or aria-describedby.
Loading example…
Empty Children
Renders correctly with no children — useful for conditional label patterns that may produce no text.
Loading example…
Multiple Labels
Multiple hidden labels used together — each independently available to assistive technology.
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
disabled system | boolean | undefined | — | Specifies the disabled state of the text view for testing purposes. |
size system | "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | undefined | — | |
theme system | ThemeName | null | undefined | — | Applies a theme to this element |
Accessibility & DOM props (2)
| Prop | Type |
|---|---|
key | Key | null | undefined |
ref | Ref<TamaguiTextElement> | undefined |
Plus 507 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.