Visibility and interaction

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"),
])

​hidden

​allowsHitTesting

​disabled

​textSelection

​See also

hidden

allowsHitTesting

disabled

textSelection

See also