Skip to main content
.hidden(): Component

​
Support

​
Usage

​
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()
    ])
}

​
Notes

  • 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().

​
See Also

  • opacity — controls transparency without affecting layout or hit testing