# Sheet

A side panel for tasks that need context.

## How to use it

Always include Title and Description. The trigger opens the panel, Escape closes it and focus returns to the original control. You can manage open and onOpenChange.



## Import


```tsx
import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter, SheetClose, SheetOverlay, SheetPortal } from "@kivora/nextjs";
```


Examples run in a Client Component. Also import the hooks, icons and dependencies used. This is the web API; consult the native guide for React Native.

## Example


```tsx
<Sheet><SheetTrigger asChild><Button>Open panel</Button></SheetTrigger><SheetContent><SheetHeader><SheetTitle>A space for your idea</SheetTitle><SheetDescription>Review the details before continuing.</SheetDescription></SheetHeader><div style={{padding:"24px 0"}}><Input aria-label="Project name" placeholder="Project name" /></div><SheetFooter><SheetClose asChild><Button>Done</Button></SheetClose></SheetFooter></SheetContent></Sheet>
```


## API: Sheet


```typescript
declare function Sheet({ open, defaultOpen, onOpenChange, ...props }: SheetProps): React.JSX.Element;
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| children | ReactNode | No | Content or child elements of the component. |
| defaultOpen | boolean | No | Whether it starts open in uncontrolled mode. |
| modal | boolean | No | See the published type. |
| onOpenChange | ((open: boolean) => void) | No | Receives the new open state. |
| open | boolean | No | Controlled open state. |

## API: SheetTrigger


```typescript
SheetTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| disabled | boolean | No | Disable interaction with the control. |
| id | string | No | Element identifier; associates labels and descriptions. |
| name | string | No | Name used to identify the control in forms. |
| onChange | ChangeEventHandler<HTMLButtonElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLButtonElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLButtonElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |
| type | "button" \| "submit" \| "reset" | No | Operation type or mode; values depend on the component. |
| value | string \| number \| readonly string[] | No | Controlled value. Update it from the change callback. |

## API: SheetContent


```typescript
SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| closeLabel | string | No | See the published type. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| deferPointerDownOutside | boolean | No | When `true`, a `'pointerdown'` event outside of the layered element will wait for the interaction's click event before dispatching, allowing third-party code to stop propagation of later events and cancel dismissal. |
| forceMount | true | No | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onCloseAutoFocus | ((event: Event) => void) | No | Event handler called when auto-focusing on close. Can be prevented. |
| onEscapeKeyDown | ((event: KeyboardEvent) => void) | No | Event handler called when the escape key is down. Can be prevented. |
| onFocusOutside | ((event: FocusOutsideEvent) => void) | No | Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented. |
| onInteractOutside | ((event: PointerDownOutsideEvent \| FocusOutsideEvent) => void) | No | Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented. |
| onOpenAutoFocus | ((event: Event) => void) | No | Event handler called when auto-focusing on open. Can be prevented. |
| onPointerDownOutside | ((event: PointerDownOutsideEvent) => void) | No | Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| portalContainer | HTMLElement \| null | No | See the published type. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| side | "left" \| "right" \| "top" \| "bottom" | No | Side from which the panel appears. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |

## API: SheetHeader


```typescript
SheetHeader: {
    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
    displayName: string;
}
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |

## API: SheetTitle


```typescript
SheetTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLHeadingElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLHeadingElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLHeadingElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |

## API: SheetDescription


```typescript
SheetDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLParagraphElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLParagraphElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLParagraphElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |

## API: SheetFooter


```typescript
SheetFooter: {
    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
    displayName: string;
}
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |

## API: SheetClose


```typescript
SheetClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| disabled | boolean | No | Disable interaction with the control. |
| id | string | No | Element identifier; associates labels and descriptions. |
| name | string | No | Name used to identify the control in forms. |
| onChange | ChangeEventHandler<HTMLButtonElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLButtonElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLButtonElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |
| type | "button" \| "submit" \| "reset" | No | Operation type or mode; values depend on the component. |
| value | string \| number \| readonly string[] | No | Controlled value. Update it from the change callback. |

## API: SheetOverlay


```typescript
SheetOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| forceMount | true | No | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |

## API: SheetPortal


```typescript
SheetPortal: React.FC<DialogPrimitive.DialogPortalProps>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| children | ReactNode | No | Content or child elements of the component. |
| container | Element \| DocumentFragment \| null | No | Specify a container element to portal the content into. |
| forceMount | true | No | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. |

Source: https://kivora.pro/docs/componentes/sheet