[Feature] Add NativeSelect component #344
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add a styled native HTML select component inspired by shadcn/ui's native-select. Includes NativeSelect, NativeSelectOption, and NativeSelectGroup sub-components with support for size variants (:default, :sm), disabled state, aria-invalid styling, and form field integration.
Move the chevron icon from an inline private method in NativeSelect into a dedicated NativeSelectIcon component, following the same pattern as AccordionIcon. Supports block override for custom icons.
Update docs to match the original shadcn native-select page: Default, Groups, Disabled, Invalid examples with descriptions. Add Native Select vs Select comparison section.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Add a styled native HTML
<select>component inspired by shadcn/ui's native-select.This provides a lightweight alternative to the custom
Selectcomponent, using the browser's native select behavior with consistent design system styling.Components
NativeSelect— wrapper with styled<select>and chevronNativeSelectIconNativeSelectOption— styled<option>elementNativeSelectGroup— styled<optgroup>elementNativeSelectIcon— customizable chevron icon (supports block override)Features
aria-invalidstyling for form validationruby-ui--form-field)Screenshots
Testing instructions
In the
web/repo:ruby_uigem to the local path inGemfile:gem "ruby_ui", path: "../ruby_ui"bundle installbin/rails g ruby_ui:component NativeSelectbin/rails g ruby_ui:install:docs --forceget "native_select", to: "docs#native_select", as: :docs_native_selectdef native_select; render Views::Docs::NativeSelect.new; endapp/components/shared/menu.rbbin/devand visit/docs/native_select