Skip to main content
.presentationDetents(detents: PresentationDetents): Component
​
detents
PresentationDetents
required
An array of detent configurations that define the available sheet heights. Each detent is a PresentationDetent object with a detentType property.Use the Detent convenience constructors:
  • Detent.medium — half-screen height
  • Detent.large — full-screen height
  • Detent.fraction(value) — fraction of screen height (0 to 1)
  • Detent.height(value) — exact height in points

​
Support

​
Usage

​
Medium and large detents

const body = () => {
    const [showSheet, setShowSheet] = useState(false)
    return VStack([
        Button("Open Sheet", () => setShowSheet(true))
    ]).sheet({
        isPresented: showSheet,
        setIsPresented: setShowSheet,
        content: () => Text("Sheet content").padding(16)
    }).presentationDetents([Detent.medium, Detent.large])
}

​
Custom fraction detent

const body = () => {
    const [showSheet, setShowSheet] = useState(false)
    return VStack([
        Button("Show", () => setShowSheet(true))
    ]).sheet({
        isPresented: showSheet,
        setIsPresented: setShowSheet,
        content: () => Text("Quarter sheet").padding(16)
    }).presentationDetents([Detent.fraction(0.25), Detent.medium])
}

​
Fixed height detent

const body = () => {
    const [showSheet, setShowSheet] = useState(false)
    return VStack([
        Button("Show", () => setShowSheet(true))
    ]).sheet({
        isPresented: showSheet,
        setIsPresented: setShowSheet,
        content: () => Text("Fixed height sheet").padding(16)
    }).presentationDetents([Detent.height(300), Detent.large])
}

​
Notes

  • Apply .presentationDetents() to the same component that has the .sheet() modifier.
  • When multiple detents are provided, the user can drag between them.
  • If only one detent is provided, the sheet snaps to that height and cannot be resized.