{"name":"native-select","title":"Native Select","description":"A styled wrapper around the native HTML select element — zero JavaScript, full native accessibility and the platform's own mobile picker.","installCommand":"bunx marko-ui add native-select -y","usageTags":"<NativeSelect>, <NativeSelectOption>","importSnippet":"import NativeSelect from \"@/components/ui/native-select/native-select.marko\";\nimport NativeSelectOption from \"@/components/ui/native-select/native-select-option.marko\";","usageSnippet":"<NativeSelect>\n  <NativeSelectOption value=\"\">Select an option</NativeSelectOption>\n  <NativeSelectOption value=\"one\">One</NativeSelectOption>\n  <NativeSelectOption value=\"two\">Two</NativeSelectOption>\n</NativeSelect>","tags":["NativeSelect","NativeSelectNativeSelectOptgroup","NativeSelectNativeSelectOption"],"parts":[],"props":[{"name":"size","type":"'default' | 'sm'","required":false}],"events":[],"keyboard":[],"accessibilityNotes":["Renders a real native `<select>` element, so it gets full native keyboard support, screen-reader semantics, and the platform's own mobile picker UI for free — no ARIA wiring or Zag machine required.","Pass `aria-invalid=\"true\"` to announce a validation error state; pair it with a wrapping `Field` and `FieldError` for visible error styling and messaging (see the Invalid example).","`dir` is a plain native HTML attribute here (native-select has no Zag machine), so `dir=\"rtl\"` relies entirely on the browser's own RTL layout and keyboard handling rather than any library-level positioning logic.","Use `NativeSelect` for native browser behavior, better performance, or mobile-optimized dropdowns; use `Select` (the styled, Zag-driven component) for custom styling, animations, or complex interactions."],"examples":[{"id":"native-select-demo","title":"Default","source":"import NativeSelect from \"@marko-ui/shadcn/ui/native-select/native-select.marko\";\nimport NativeSelectOption from \"@marko-ui/shadcn/ui/native-select/native-select-option.marko\";\n\n<NativeSelect aria-label=\"Status\">\n  <NativeSelectOption value=\"\">Select status</NativeSelectOption>\n  <NativeSelectOption value=\"todo\">Todo</NativeSelectOption>\n  <NativeSelectOption value=\"in-progress\">In Progress</NativeSelectOption>\n  <NativeSelectOption value=\"done\">Done</NativeSelectOption>\n  <NativeSelectOption value=\"cancelled\">Cancelled</NativeSelectOption>\n</NativeSelect>","description":"A native select styled to match the rest of the form controls."},{"id":"native-select-groups","title":"Option groups","source":"import NativeSelect from \"@marko-ui/shadcn/ui/native-select/native-select.marko\";\nimport NativeSelectOptGroup from \"@marko-ui/shadcn/ui/native-select/native-select-optgroup.marko\";\nimport NativeSelectOption from \"@marko-ui/shadcn/ui/native-select/native-select-option.marko\";\n\n<NativeSelect aria-label=\"Department\">\n  <NativeSelectOption value=\"\">Select department</NativeSelectOption>\n  <NativeSelectOptGroup label=\"Engineering\">\n    <NativeSelectOption value=\"frontend\">Frontend</NativeSelectOption>\n    <NativeSelectOption value=\"backend\">Backend</NativeSelectOption>\n    <NativeSelectOption value=\"devops\">DevOps</NativeSelectOption>\n  </NativeSelectOptGroup>\n  <NativeSelectOptGroup label=\"Sales\">\n    <NativeSelectOption value=\"sales-rep\">Sales Rep</NativeSelectOption>\n    <NativeSelectOption value=\"account-manager\">Account Manager</NativeSelectOption>\n    <NativeSelectOption value=\"sales-director\">Sales Director</NativeSelectOption>\n  </NativeSelectOptGroup>\n  <NativeSelectOptGroup label=\"Operations\">\n    <NativeSelectOption value=\"support\">Customer Support</NativeSelectOption>\n    <NativeSelectOption value=\"product-manager\">Product Manager</NativeSelectOption>\n    <NativeSelectOption value=\"ops-manager\">Operations Manager</NativeSelectOption>\n  </NativeSelectOptGroup>\n</NativeSelect>","description":"Use `NativeSelectOptGroup` to group related options under a label."},{"id":"native-select-disabled","title":"Disabled","source":"import NativeSelect from \"@marko-ui/shadcn/ui/native-select/native-select.marko\";\nimport NativeSelectOption from \"@marko-ui/shadcn/ui/native-select/native-select-option.marko\";\n\n<NativeSelect disabled aria-label=\"Priority\">\n  <NativeSelectOption value=\"\">Select priority</NativeSelectOption>\n  <NativeSelectOption value=\"low\">Low</NativeSelectOption>\n  <NativeSelectOption value=\"medium\">Medium</NativeSelectOption>\n  <NativeSelectOption value=\"high\">High</NativeSelectOption>\n  <NativeSelectOption value=\"critical\">Critical</NativeSelectOption>\n</NativeSelect>","description":"Pass `disabled` to disable the whole control."},{"id":"native-select-invalid","title":"Invalid","source":"import NativeSelect from \"@marko-ui/shadcn/ui/native-select/native-select.marko\";\nimport NativeSelectOption from \"@marko-ui/shadcn/ui/native-select/native-select-option.marko\";\n\n<NativeSelect aria-invalid=\"true\" aria-label=\"Error state\">\n  <NativeSelectOption value=\"\">Error state</NativeSelectOption>\n  <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n  <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n  <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\n</NativeSelect>","description":"Pass `aria-invalid` to show a validation error state.","essential":true},{"id":"native-select-rtl","title":"RTL","source":"import NativeSelect from \"@marko-ui/shadcn/ui/native-select/native-select.marko\";\nimport NativeSelectOption from \"@marko-ui/shadcn/ui/native-select/native-select-option.marko\";\n\n<NativeSelect dir=\"rtl\" aria-label=\"اختر الحالة\">\n  <NativeSelectOption value=\"\">اختر الحالة</NativeSelectOption>\n  <NativeSelectOption value=\"todo\">مهام</NativeSelectOption>\n  <NativeSelectOption value=\"in-progress\">قيد التنفيذ</NativeSelectOption>\n  <NativeSelectOption value=\"done\">منجز</NativeSelectOption>\n  <NativeSelectOption value=\"cancelled\">ملغي</NativeSelectOption>\n</NativeSelect>","description":"Pass `dir=\"rtl\"` — a plain native HTML attribute here, since native-select wraps a `<select>` with no Zag machine — to get the browser's own RTL rendering and keyboard handling."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"select","subcomponents":[{"name":"native-select-optgroup","props":[],"nativeAttributes":"optgroup"},{"name":"native-select-option","props":[],"nativeAttributes":"option"}]}