var Component=(()=>{var S=Object.create;var a=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var l in e)a(t,l,{get:e[l],enumerable:!0})},s=(t,e,l,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let c of m(e))!g.call(t,c)&&c!==l&&a(t,c,{get:()=>e[c],enumerable:!(o=d(e,c))||o.enumerable});return t};var y=(t,e,l)=>(l=t!=null?S(h(t)):{},s(e||!t||!t.__esModule?a(l,"default",{value:t,enumerable:!0}):l,t)),b=t=>s(a({},"__esModule",{value:!0}),t);var r=f((j,i)=>{i.exports=_jsx_runtime});var L={};v(L,{default:()=>p,frontmatter:()=>x});var n=y(r()),x={id:"select",title:"Select",description:"Allows users to select one or more values from a list."};function u(t){let e={code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",...t.components},{ComponentLinks:l}=e;return l||k("ComponentLinks",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(l,{github:{package:"saas-ui-forms"},npm:{package:"@saas-ui/forms"}}),` `,(0,n.jsx)(e.h2,{id:"import",children:"Import"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-ts",children:`import { Select, SelectButton, SelectList, SelectOption } from '@saas-ui/react' `})}),` `,(0,n.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,n.jsx)(e.h3,{id:"basic-usage",children:"Basic Usage"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` `})}),` `,(0,n.jsx)(e.h3,{id:"sizes",children:"Sizes"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` `})}),` `,(0,n.jsx)(e.h3,{id:"multi-select",children:"Multi select"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` `})}),` `,(0,n.jsx)(e.h3,{id:"custom-options",children:"Custom options"}),` `,(0,n.jsxs)(e.p,{children:["Alternatively you can use ",(0,n.jsx)(e.code,{children:"MenuItemOption"})," to compose the select options, which gives you full control and flexibility."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`import { Image, HStack, MenuDivider } from '@chakra-ui/react' import { Select, SelectButton, SelectList, SelectOption } from '@saas-ui/react' export default function CatSelect() { return ( ) } `})})]})}function p(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(u,{...t})}):u(t)}function k(t,e){throw new Error("Expected "+(e?"component":"object")+" `"+t+"` to be defined: you likely forgot to import, pass, or provide it.")}return b(L);})(); ;return Component;

Select

Import#

Usage#

Basic Usage#

Sizes#

Multi select#

Custom options#