Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt

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

These modifiers govern whether a component is shown to the user, whether it responds to taps and clicks, and whether its text can be selected. hidden keeps the component in the layout but invisible; allowsHitTesting lets touches pass through without changing appearance; disabled blocks interaction and dims the visuals; textSelection toggles selectability of text content. Pick by intent — visibility (hidden), interaction (allowsHitTesting, disabled), or selection (textSelection). For full transparency without removing hit testing, use opacity instead.

​
hidden

Hides the component while preserving its layout space. 
.hidden(): Component
Hiding a component The component becomes invisible but still occupies space in the layout. 
VStack([
    Text("Visible"),
    Text("Invisible").hidden(),
    Text("Also visible")
])
Conditional visibility 
const body = () => {
    const [showHint, setShowHint] = useState(false)

    return VStack([
        Button("Toggle Hint", () => setShowHint(!showHint)),
        showHint
            ? Text("Here is the hint")
            : Text("Here is the hint").hidden()
    ])
}
Unlike setting .opacity(0), .hidden() also removes the component from hit testing — it will not respond to taps or other gestures. The component’s layout space is still reserved. To remove a component from the layout entirely, conditionally exclude it from the view tree instead of using .hidden().

​
allowsHitTesting

Controls whether a component receives touch or click events. 
.allowsHitTesting(enabled: boolean)
​
enabled
boolean
required
When false, the component and all its descendants become transparent to touch and click events. Events pass through to views behind it.
Make an overlay pass through touches 
ZStack([
    Button("Tap me", () => handleTap()),
    Color("black")
        .opacity(0.3)
        .allowsHitTesting(false)
])
Disable interaction on a watermark 
Image({ url: "watermark.png" })
    .resizable()
    .allowsHitTesting(false)
Unlike disabled, allowsHitTesting(false) does not dim the component visually. It only affects whether the component receives interaction events.

​
disabled

Disables interaction with a component and dims its appearance. 
.disabled(isDisabled: boolean)
​
isDisabled
boolean
required
When true, the component and its descendants cannot receive interaction events. The component is also visually dimmed.
Disable a button 
Button("Submit", () => submit())
    .disabled(!isFormValid)
Disable an entire form section 
VStack([
    TextField({ text, setText }),
    Button("Save", () => save())
])
    .disabled(isLoading)
disabled(true) both prevents interaction and applies a visual dimming effect. To prevent interaction without the visual change, use allowsHitTesting(false) instead.

​
textSelection

Enables or disables user text selection. 
.textSelection(mode: "enabled" | "disabled"): Component
​
mode
"enabled" | "disabled"
required
Whether text selection is enabled or disabled.
Enable text selection Allow users to select and copy text content. 
Text("You can select and copy this text.")
    .textSelection("enabled")
Disable text selection Prevent text from being selected, useful for labels or decorative text. 
Text("This text cannot be selected.")
    .textSelection("disabled")
Selectable paragraph 
VStack({ alignment: "leading", spacing: 8 }, [
    Text("Article Title")
        .font("title")
        .textSelection("disabled"),
    Text("This is the body of the article. Users can select and copy this content for sharing.")
        .textSelection("enabled"),
])

​
See also