R
RailsViewKit

Select

Dropdown select menus for choosing from a list of options.

Basic Select

A simple select with options.

<%= render Rvk::SelectComponent.new(
  name: "country",
  label: "Country",
  options: [
    ["United States", "us"],
    ["United Kingdom", "uk"],
    ["Canada", "ca"],
    ["Australia", "au"],
    ["Germany", "de"]
  ]
) %>

With Blank Option

Add a placeholder option at the top.

<%= render Rvk::SelectComponent.new(
  name: "category",
  label: "Category",
  include_blank: "Select a category",
  options: [
    ["Technology", "tech"],
    ["Design", "design"],
    ["Marketing", "marketing"],
    ["Sales", "sales"]
  ]
) %>

Pre-selected Value

Set a default selected option.

<%= render Rvk::SelectComponent.new(
  name: "priority",
  label: "Priority",
  selected: "medium",
  options: [
    ["Low", "low"],
    ["Medium", "medium"],
    ["High", "high"],
    ["Critical", "critical"]
  ]
) %>

Sizes

Selects come in 3 sizes.

<%= render Rvk::SelectComponent.new(name: "sm", label: "Small", size: :sm, options: [["Option 1", "1"], ["Option 2", "2"]]) %>
<%= render Rvk::SelectComponent.new(name: "md", label: "Medium", size: :md, options: [["Option 1", "1"], ["Option 2", "2"]]) %>
<%= render Rvk::SelectComponent.new(name: "lg", label: "Large", size: :lg, options: [["Option 1", "1"], ["Option 2", "2"]]) %>

Error State

Display validation errors.

Please select a role.

<%= render Rvk::SelectComponent.new(
  name: "role",
  label: "Role",
  error: "Please select a role.",
  include_blank: "Select a role",
  options: [["Admin", "admin"], ["User", "user"], ["Guest", "guest"]]
) %>

Props

Prop Type Default Description
name String required Form field name
options Array [] Array of [text, value] pairs
selected String nil Pre-selected value
include_blank String/Boolean nil Add blank option (true or custom text)
multiple Boolean false Allow multiple selections
label String nil Label text
size Symbol :md Select size: :sm, :md, :lg
hint String nil Helper text below select
error String nil Error message
required Boolean false Mark as required
disabled Boolean false Disable the select