> ## 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.

# Detent

> Convenience constructors for presentation detent sizes used with sheet presentations.

```typescript theme={null}
declare const Detent: {
    medium: { detentType: "medium" };
    large: { detentType: "large" };
    fraction(value: number): { detentType: "fraction"; value: number };
    height(value: number): { detentType: "height"; value: number };
};
```

## Properties

<ParamField path="Detent.medium" type="{ detentType: 'medium' }">
  A standard medium-sized detent, typically around half the screen height.
</ParamField>

<ParamField path="Detent.large" type="{ detentType: 'large' }">
  A large detent that fills most or all of the available screen space.
</ParamField>

## Methods

### fraction

Creates a custom detent at a fraction of the screen height.

```typescript theme={null}
Detent.fraction(value: number): { detentType: "fraction"; value: number }
```

<ParamField path="value" type="number" required>
  A number between 0 and 1 representing the fraction of screen height.
</ParamField>

### height

Creates a custom detent at a fixed height in points.

```typescript theme={null}
Detent.height(value: number): { detentType: "height"; value: number }
```

<ParamField path="value" type="number" required>
  The fixed height in points.
</ParamField>

## Usage

### Standard detents

```typescript theme={null}
const body = () => {
    const [isPresented, setIsPresented] = useState(false)

    return VStack([
        Button("Show Sheet", () => setIsPresented(true))
    ])
    .sheet({
        isPresented,
        setIsPresented,
        content: () => Text("Sheet content")
    })
    .presentationDetents([Detent.medium, Detent.large])
}
```

### Fractional detent

```typescript theme={null}
const body = () => {
    const [isPresented, setIsPresented] = useState(false)

    return VStack([
        Button("Show Sheet", () => setIsPresented(true))
    ])
    .sheet({
        isPresented,
        setIsPresented,
        content: () => Text("Quarter-height sheet")
    })
    .presentationDetents([Detent.fraction(0.25)])
}
```

### Fixed height detent

```typescript theme={null}
const body = () => {
    const [isPresented, setIsPresented] = useState(false)

    return VStack([
        Button("Show Sheet", () => setIsPresented(true))
    ])
    .sheet({
        isPresented,
        setIsPresented,
        content: () => Text("300pt sheet")
    })
    .presentationDetents([Detent.height(300)])
}
```

### Combining detent types

```typescript theme={null}
const body = () => {
    const [isPresented, setIsPresented] = useState(false)

    return VStack([
        Button("Show Sheet", () => setIsPresented(true))
    ])
    .sheet({
        isPresented,
        setIsPresented,
        content: () => VStack([
            Text("Drag to resize"),
            Text("Three snap points")
        ])
    })
    .presentationDetents([
        Detent.height(200),
        Detent.fraction(0.5),
        Detent.large
    ])
}
```

## Notes

* Detents define the snap points where a sheet rests when dragged by the user.
* Multiple detents allow users to resize the sheet between defined sizes.
* The order of detents in the array does not matter -- the sheet snaps to the closest detent.
* On platforms that do not support detents, sheets typically default to full screen.
* `Detent.medium` and `Detent.large` are semantic and adapt to platform conventions.
* Fraction values should be between 0 and 1.