Lunar Kit LogoLunar Kit
Components

Select Sheet

A bottom sheet based select component, ideal for mobile interfaces, with support for single and multiple selections, searching, and infinite scrolling.

Demo
Code
Single Select
Favorite Framework
Multi Select (Max 3)
Tech Stack

Installation

lunar add select-sheet

Usage

import { SelectSheet, MultiSelectSheet } from '@/components/ui/select-sheet';
 
const options = [
{ label: 'Apple', value: 'apple' },
{ label: 'Banana', value: 'banana' },
{ label: 'Orange', value: 'orange' },
];

Single Select

<SelectSheet
label="Favorite Fruit"
options={options}
value={value}
onValueChange={setValue}
placeholder="Select a fruit"
title="Choose a Fruit"
/>

Multi Select

<MultiSelectSheet
label="Favorite Fruits"
options={options}
value={selectedValues}
onValueChange={setSelectedValues}
placeholder="Select fruits"
title="Choose Fruits"
maxSelection={3}
/>

Searchable

<SelectSheet
options={options}
value={value}
onValueChange={setValue}
searchable
searchPlaceholder="Search fruits..."
/>

Infinite Loading

For large datasets, you can implement infinite loading using the `onLoadMore`, `hasMore`, and `isLoading` props.

<SelectSheet
options={items}
value={value}
onValueChange={setValue}
onLoadMore={fetchMoreItems}
hasMore={true}
isLoading={loading}
/>

Trigger Variants & Sizes

// Variants
<SelectSheet variant="outline" {...props} />
<SelectSheet variant="underline" {...props} />
 
// Sizes
<SelectSheet size="sm" {...props} />
<SelectSheet size="md" {...props} />
<SelectSheet size="lg" {...props} />

With Error and Disabled States

// Error state
<SelectSheet
error="Please select a valid option"
{...props}
/>
 
// Disabled state
<SelectSheet
disabled
{...props}
/>

API Reference

SelectSheet

PropTypeDefaultDescription
`options``SelectOption[]`RequiredList of options (`{ label, value, ... }`)
`value``string | number`—Selected value
`onValueChange``function`—Callback when value changes
`placeholder``string``'Select...'`Placeholder text for trigger
`label``string`—Input label displayed above
`error``string`—Error message to display
`disabled``boolean``false`Disable the select
`variant``'outline' | 'underline'``'outline'`Visual variant of the trigger
`size``'sm' | 'md' | 'lg'``'md'`Size of the trigger
`className``string`—Additional wrapper classes
`title``string``'Select an option'`Sheet header title
`description``string`—Sheet header description
`snapPoints``string[]``['70%']`Sheet snap points
`searchable``boolean``false`Enable search bar
`searchPlaceholder``string``'Search...'`Search input placeholder
`onSearch``(query) => void`—Callback when search changes
`emptyMessage``string``'No options found'`Custom empty state message
`onLoadMore``() => void`—Callback for infinite scrolling
`hasMore``boolean``false`Whether more items are available
`isLoading``boolean``false`Show loading indicator at footer
`name``string`—Input name for form integration

MultiSelectSheet

Inherits all properties from `SelectSheet`, but adjusts the value shape and adds multiple-selection features:

PropTypeDefaultDescription
`value``(string | number)[]``[]`Array of selected values
`onValueChange``function`—Callback with selected array
`maxSelection``number`—Maximum allowed selections
`showCount``boolean``true`Show selected count in sheet header

Previous

Select

Next

Tabs

On this page