Mogora UIv0.6

Getting Started

introduction installation

Components

accordion avatar badge button card checkbox drawer input label modal popover select sheet table tabs textarea toggle

Getting Started

introduction installation

Components

accordion avatar badge button card checkbox drawer input label modal popover select sheet table tabs textarea toggle

Select

Description

Select is a UI component used to create customizable dropdown selections. This component allows users to choose an option from a list and is designed with flexibility in mind, supporting different styles and behaviors.

Usage

Options


import { Select } from "mogora-ui";

export default function SelectDemo() {
  return (
    <Select className="w-sm">
      <Select.Trigger>Options</Select.Trigger>
      <Select.Content>
        <Select.Item value="options-1">Option 1</Select.Item>
        <Select.Item value="options-2">Option 2</Select.Item>
        <Select.Item value="options-3">Option 3</Select.Item>
        <Select.Item value="options-4">Option 4</Select.Item>
      </Select.Content>
    </Select>
  )
}

API Reference

Select

A component that provides a customizable select dropdown for users to choose from.

Prop	Type	Description
children	ReactNode	Elements to be rendered inside the select component.
className	string	Additional classes for styling.
name	string	The name attribute for the hidden input field.
value	string	The currently selected value.
onChange	(e: React.ChangeEvent<HTMLInputElement>) => void	Callback function triggered when the value changes.

Select.Trigger

The trigger component used to display the select dropdown when clicked.

Prop	Type	Description
children	ReactNode	The element that can be clicked to show the dropdown.
className	string	Additional classes for styling.
icon	ReactNode \| boolean	Optional icon displayed alongside the selected value. Set to `false` to disable the default icon.

Select.Content

The component that contains the displayed dropdown content.

Prop	Type	Description
children	ReactNode	Content to be displayed inside the dropdown.
className	string	Additional classes for styling.

Select.Item

An item inside the dropdown list.

Prop	Type	Description
children	string	The text content of the item.
value	string	The value associated with the item.
className	string	Additional classes for styling.
onClick	(e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void	Callback function triggered when the item is clicked.