Select - hextastudio/ui

hextastudio/ui needs your support to stay running 🫶 Help us

Preview

No option selected

Installation

bash

npx hexta-ui add select

tsx

import { Select } from "@/components/hexta-ui/Select";

Basic Select

No option selected

Usage

tsx

import { useState } from "react";
import { Option } from "@/components/hexta-ui/Select";

export const Home = () => {
  const [selectedOption, setSelectedOption] = useState<Option | null>(null);

  const options = [
    { value: 1, label: "Option 1" },
    { value: 2, label: "Option 2" },
    { value: 3, label: "Option 3" },

Grouped Select

No option selected

Usage

tsx

import { useState } from "react";
import { Option } from "@/components/hexta-ui/Select";

const groupedOptions = {
  "Group 1": [
    { value: 1, label: "Option 1" },
    { value: 2, label: "Option 2" },
  ],
  "Group 2": [
    { value: 3, label: "Option 3" },

Animated Select

No option selected

Usage

tsx

import { useState } from "react";   
import { Option } from "@/components/hexta-ui/Select";

export const Home = () => {
  const [selectedOption, setSelectedOption] = useState<Option | null>(null);

  const options = [
    { value: 1, label: "Option 1" },
    { value: 2, label: "Option 2" },
    { value: 3, label: "Option 3" },

Multi-Select

No option selected

Usage

tsx

import { useState } from "react";
import { Option } from "@/components/hexta-ui/Select";


export const Home = () => {
  const [selectedOption, setSelectedOption] = useState([]);

  const options = [
    { value: 1, label: "Option 1" },
    { value: 2, label: "Option 2" },

Searchable Select

No option selected

Usage

tsx

import { useState } from "react";
import { Option } from "@/components/hexta-ui/Select";

export const Home = () => {
  const [selectedOption, setSelectedOption] = useState<Option | null>(null);

  const options = [
    { value: 1, label: "Option 1" },
    { value: 2, label: "Option 2" },
    { value: 3, label: "Option 3" },

Icon Select

No option selected

Usage

tsx

import { useState } from "react";
import { Option } from "@/components/hexta-ui/Select";

export const Home = () => {
  const [selectedOption, setSelectedOption] = useState<Option | null>(null);

  const iconOptions = [
    { value: 1, label: "Apple", icon: <FaApple /> },
    { value: 2, label: "Android", icon: <FaAndroid /> },
    { value: 3, label: "Windows", icon: <FaWindows /> },

Props Information

Prop Name

Prop Type

Default Value

Description

Prop Name	Prop Type	Default Value	Description