playbook_ui 15.6.0.pre.rc.4 → 15.7.0.pre.alpha.PLAY2675dropdownquickpickcustomquickpickdates13330

data/app/pb_kits/playbook/pb_dropdown/quickpick/index.ts

@@ -11,8 +11,78 @@ type QuickPickOption = {
   id?: string;
 };
 
+type CustomQuickPickDate = {
+  label: string;
+  value: string[] | { timePeriod: string; amount: number };
+};
+
+type CustomQuickPickDates = {
+  override?: boolean;
+  dates: CustomQuickPickDate[];
+};
+
+// Helper function to calculate date range from timePeriod and amount
+const calculateDateRange = (timePeriod: string, amount: number): Date[] => {
+  const endDate = new Date();
+  const startDate = new Date();
+
+  switch (timePeriod) {
+    case 'days':
+      startDate.setDate(endDate.getDate() - amount);
+      break;
+    case 'weeks':
+      startDate.setDate(endDate.getDate() - (amount * 7));
+      break;
+    case 'months':
+      startDate.setMonth(endDate.getMonth() - amount);
+      break;
+    case 'quarters':
+      startDate.setMonth(endDate.getMonth() - (amount * 3));
+      break;
+    case 'years':
+      startDate.setFullYear(endDate.getFullYear() - amount);
+      break;
+    default:
+      throw new Error('Invalid time period');
+  }
+  return [startDate, endDate];
+};
+
+// Helper to format date for display
+const formatDate = (date: Date) => {
+  const day = String(date.getDate()).padStart(2, "0");
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const year = date.getFullYear();
+
+  return `${month}/${day}/${year}`;
+};
+
+// Helper to create a QuickPickOption from a custom date
+const createOptionFromCustomDate = (customDate: CustomQuickPickDate): QuickPickOption => {
+  let dateRange: Date[];
+  
+  if (Array.isArray(customDate.value)) {
+    // Explicit date range as string array
+    dateRange = customDate.value.map((dateStr: string) => new Date(dateStr));
+  } else {
+    // Calculate from timePeriod and amount
+    dateRange = calculateDateRange(
+      customDate.value.timePeriod,
+      customDate.value.amount
+    );
+  }
+
+  return {
+    label: customDate.label,
+    value: dateRange,
+    formattedStartDate: formatDate(dateRange[0]),
+    formattedEndDate: formatDate(dateRange[1]),
+    id: `quickpick-${customDate.label.toLowerCase().replace(/\s+/g, '-')}`,
+  };
+};
+
 // Helper to get QuickPick options with date ranges
-const getQuickPickOptions = (rangeEndsToday = false): QuickPickOption[] => {
+const getQuickPickOptions = (rangeEndsToday = false, customQuickPickDates?: CustomQuickPickDates): QuickPickOption[] => {
   const today = new Date();
   const yesterday = DateTime.getYesterdayDate(new Date());
 
@@ -36,14 +106,7 @@ const getQuickPickOptions = (rangeEndsToday = false): QuickPickOption[] => {
   const lastYearStartDate = DateTime.getPreviousYearStartDate(new Date());
   const lastYearEndDate = DateTime.getPreviousYearEndDate(new Date());
 
-  const formatDate = (date: Date) => {
-  const day = String(date.getDate()).padStart(2, "0")
-  const month = String(date.getMonth() + 1).padStart(2, "0")
-  const year = date.getFullYear()
-
-  return `${month}/${day}/${year}`
-}
-  return [
+  const defaultOptions: QuickPickOption[] = [
     { label: 'Today', value: [today, today], id: 'quickpick-today' },
     { label: 'Yesterday', value: [yesterday, yesterday], formattedStartDate: `${formatDate(yesterday)}`, formattedEndDate: `${formatDate(yesterday)}`, id: 'quickpick-yesterday' },
     { label: 'This Week', value: [thisWeekStartDate, thisWeekEndDate], formattedStartDate: `${formatDate(thisWeekStartDate)}`, formattedEndDate: `${formatDate(thisWeekEndDate)}`, id: 'quickpick-this-week' },
@@ -55,6 +118,19 @@ const getQuickPickOptions = (rangeEndsToday = false): QuickPickOption[] => {
     { label: 'Last Quarter', value: [lastQuarterStartDate, lastQuarterEndDate], formattedStartDate: `${formatDate(lastQuarterStartDate)}`, formattedEndDate: `${formatDate(lastQuarterEndDate)}`, id: 'quickpick-last-quarter' },
     { label: 'Last Year', value: [lastYearStartDate, lastYearEndDate], formattedStartDate: `${formatDate(lastYearStartDate)}`, formattedEndDate: `${formatDate(lastYearEndDate)}`, id: 'quickpick-last-year' },
   ];
+
+  // Handle customQuickPickDates and override logic
+  if (customQuickPickDates && customQuickPickDates.dates && customQuickPickDates.dates.length > 0) {
+    const customOptions = customQuickPickDates.dates.map(createOptionFromCustomDate);
+    
+    if (customQuickPickDates.override === false) {
+      return [...defaultOptions, ...customOptions];
+    }
+    
+    return customOptions;
+  }
+
+  return defaultOptions;
 };
 
 export default getQuickPickOptions

data/app/pb_kits/playbook/pb_dropdown/quickpick_helper.rb

@@ -0,0 +1,156 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDropdown
+    module QuickpickHelper
+      class << self
+        def get_quickpick_options(range_ends_today: false, custom_quick_pick_dates: {})
+          default_options = build_default_options(range_ends_today)
+
+          # Handle custom_quick_pick_dates
+          return default_options if custom_quick_pick_dates.blank?
+
+          dates = custom_quick_pick_dates[:dates] || custom_quick_pick_dates["dates"]
+          return default_options if dates.blank?
+
+          custom_options = dates.map { |date_config| build_custom_option(date_config) }
+
+          # Override logic
+          override = custom_quick_pick_dates[:override]
+          override = custom_quick_pick_dates["override"] if override.nil?
+
+          if override == false
+            default_options + custom_options
+          else
+            custom_options
+          end
+        end
+
+      private
+
+        def build_default_options(range_ends_today)
+          today = Date.today
+          yesterday = today - 1.day
+
+          this_week_start_date = first_day_of_week(today)
+          this_week_end_date = range_ends_today ? today : last_day_of_week(today)
+          last_week_start_date = previous_week_start_date(today)
+          last_week_end_date = previous_week_end_date(today)
+
+          this_month_start_date = today.beginning_of_month
+          this_month_end_date = range_ends_today ? today : today.end_of_month
+          last_month_start_date = (today - 1.month).beginning_of_month
+          last_month_end_date = (today - 1.month).end_of_month
+
+          this_quarter_start_date = today.beginning_of_quarter
+          this_quarter_end_date = range_ends_today ? today : today.end_of_quarter
+          last_quarter_start_date = (today - 3.months).beginning_of_quarter
+          last_quarter_end_date = (today - 3.months).end_of_quarter
+
+          this_year_start_date = today.beginning_of_year
+          this_year_end_date = range_ends_today ? today : today.end_of_year
+          last_year_start_date = (today - 1.year).beginning_of_year
+          last_year_end_date = (today - 1.year).end_of_year
+
+          [
+            { id: "quickpick-today", label: "Today", value: [today.to_s, today.to_s], formatted_start_date: format_date(today), formatted_end_date: format_date(today) },
+            { id: "quickpick-yesterday", label: "Yesterday", value: [yesterday.to_s, yesterday.to_s], formatted_start_date: format_date(yesterday), formatted_end_date: format_date(yesterday) },
+            { id: "quickpick-this-week", label: "This Week", value: [this_week_start_date.to_s, this_week_end_date.to_s], formatted_start_date: format_date(this_week_start_date), formatted_end_date: format_date(this_week_end_date) },
+            { id: "quickpick-this-month", label: "This Month", value: [this_month_start_date.to_s, this_month_end_date.to_s], formatted_start_date: format_date(this_month_start_date), formatted_end_date: format_date(this_month_end_date) },
+            { id: "quickpick-this-quarter", label: "This Quarter", value: [this_quarter_start_date.to_s, this_quarter_end_date.to_s], formatted_start_date: format_date(this_quarter_start_date), formatted_end_date: format_date(this_quarter_end_date) },
+            { id: "quickpick-this-year", label: "This Year", value: [this_year_start_date.to_s, this_year_end_date.to_s], formatted_start_date: format_date(this_year_start_date), formatted_end_date: format_date(this_year_end_date) },
+            { id: "quickpick-last-week", label: "Last Week", value: [last_week_start_date.to_s, last_week_end_date.to_s], formatted_start_date: format_date(last_week_start_date), formatted_end_date: format_date(last_week_end_date) },
+            { id: "quickpick-last-month", label: "Last Month", value: [last_month_start_date.to_s, last_month_end_date.to_s], formatted_start_date: format_date(last_month_start_date), formatted_end_date: format_date(last_month_end_date) },
+            { id: "quickpick-last-quarter", label: "Last Quarter", value: [last_quarter_start_date.to_s, last_quarter_end_date.to_s], formatted_start_date: format_date(last_quarter_start_date), formatted_end_date: format_date(last_quarter_end_date) },
+            { id: "quickpick-last-year", label: "Last Year", value: [last_year_start_date.to_s, last_year_end_date.to_s], formatted_start_date: format_date(last_year_start_date), formatted_end_date: format_date(last_year_end_date) },
+          ]
+        end
+
+        def build_custom_option(date_config)
+          label = date_config[:label] || date_config["label"]
+          value = date_config[:value] || date_config["value"]
+
+          date_range = calculate_date_range(value)
+          start_date = date_range[0]
+          end_date = date_range[1]
+
+          {
+            id: "quickpick-#{label.downcase.gsub(/\s+/, '-')}",
+            label: label,
+            value: [start_date.to_s, end_date.to_s],
+            formatted_start_date: format_date(start_date),
+            formatted_end_date: format_date(end_date),
+          }
+        end
+
+        def calculate_date_range(value)
+          # Parse date strings if value is an array
+          if value.is_a?(Array)
+            [parse_date_string(value[0]), parse_date_string(value[1])]
+          else
+            # Calculate date range from time_period and amount
+            time_period = value[:time_period] || value["time_period"] || value[:timePeriod] || value["timePeriod"]
+            amount = value[:amount] || value["amount"]
+
+            end_date = Date.today
+            start_date = calculate_start_date(time_period, amount, end_date)
+
+            [start_date, end_date]
+          end
+        end
+
+        def parse_date_string(date_str)
+          # Handle US date format (MM/DD/YYYY) because Ruby's Date.parse defaults to European format (DD/MM/YYYY)
+          if date_str.include?("/")
+            Date.strptime(date_str, "%m/%d/%Y")
+          else
+            Date.parse(date_str)
+          end
+        end
+
+        def calculate_start_date(time_period, amount, end_date)
+          case time_period.to_s
+          when "days"
+            end_date - amount.days
+          when "weeks"
+            end_date - amount.weeks
+          when "months"
+            end_date - amount.months
+          when "quarters"
+            end_date - (amount * 3).months
+          when "years"
+            end_date - amount.years
+          else
+            raise ArgumentError, "Invalid time period: #{time_period}"
+          end
+        end
+
+        def format_date(date)
+          date.strftime("%m/%d/%Y")
+        end
+
+        def format_date_range(start_date, end_date)
+          "#{format_date(start_date)} - #{format_date(end_date)}"
+        end
+
+        def first_day_of_week(date)
+          # Monday as first day of week
+          date.beginning_of_week(:monday)
+        end
+
+        def last_day_of_week(date)
+          # Sunday as last day of week
+          date.end_of_week(:monday)
+        end
+
+        def previous_week_start_date(date)
+          first_day_of_week(date) - 1.week
+        end
+
+        def previous_week_end_date(date)
+          last_day_of_week(date) - 1.week
+        end
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_filter/Filter/FilterBackground.tsx

@@ -6,10 +6,10 @@ import { GlobalProps, globalProps } from '../../utilities/globalProps'
 import Card from '../../pb_card/_card'
 
 export type FilterBackgroundProps = {
-  background: boolean,
-  className: string,
+  background?: boolean,
+  className?: string,
   children?: React.ReactChild[] | React.ReactChild,
-  dark: boolean,
+  dark?: boolean,
 } & GlobalProps
 
 const FilterBackground = (props: FilterBackgroundProps): React.ReactElement => {

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -116,7 +116,7 @@
   <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true } %>
   <%= form.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form-default", tree_data: treeData, margin_bottom: "sm", label: "Example Multi Level Select field" } %>
-
+  <%= form.time_picker :example_time_picker, props: { label: true } %>
   <%= form.actions do |action| %>
     <%= action.submit %>
     <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -117,7 +117,8 @@
   <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>
   <%= form.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form", tree_data: treeData, margin_bottom: "sm", required: true, label: "Example Multi Level Select field" } %>
-
+  <%= form.time_picker :example_time_picker_validation, props: { label: true, required: true, validation_message: "Please select a time." } %>
+ 
   <%= form.actions do |action| %>
     <%= action.submit %>
     <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>

data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb

@@ -0,0 +1,14 @@
+<%= pb_form_with(scope: :example, url: "", method: :get, validate: true) do |form| %>
+  <%= form.text_field :example_text_field, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label", required: true, required_indicator: true } %>
+  <%= form.email_field :example_email_field, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.number_field :example_number_field, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.search_field :example_search_field, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.password_field :example_password_field, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.url_field :example_url_field, props: { label: true, required: true, required_indicator: true } %>
+
+  <%= form.actions do |action| %>
+    <%= action.submit %>
+    <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.md

@@ -0,0 +1,3 @@
+The `required_indicator` prop adds a red asterisk (*) to the input label, visually marking the field as required. This works with both `label: true` for auto-generated labels and `label: "Custom Text"` for custom labels.
+
+While it's typically used alongside the `required` prop for HTML5 validation, you can use `required_indicator` independently if you're handling validation differently (e.g., client-side or backend validation).

data/app/pb_kits/playbook/pb_form/docs/example.yml

@@ -4,3 +4,4 @@ examples:
   - form_form_with: Default
   - form_form_with_validate: Default + Validation
   - form_form_with_loading: Default + Loading
+  - form_with_required_indicator: With Optional Required Indicator

data/app/pb_kits/playbook/pb_gauge/_gauge.tsx

@@ -10,6 +10,7 @@ import solidGauge from "highcharts/modules/solid-gauge";
 import defaultColors from "../tokens/exports/_colors.module.scss";
 import typography from "../tokens/exports/_typography.module.scss";
 
+import { deprecatedKitWarning } from "../utilities/deprecated";
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
 import { GenericObject } from "../types";
@@ -191,6 +192,11 @@ const Gauge = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [chartData]);
 
+    useEffect(() => {
+    // Warn about deprecated kit
+    deprecatedKitWarning('Gauge', 'Please use "PbGaugeChart" instead.');
+  }, []);
+
   return (
     <HighchartsReact
         containerProps={{

data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import classnames from "classnames";
 import { globalProps } from "../utilities/globalProps";
 import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
+import { deprecatedKitWarning} from "../utilities/deprecated";
 
 import HighchartsReact from "highcharts-react-official";
 import Highcharts from "highcharts";
@@ -142,6 +143,11 @@ const LineGraph = ({
     setOptions(merge(staticOptions, customOptions));
   }, [chartData]);
 
+    useEffect(() => {
+      // Warn about deprecated kit
+      deprecatedKitWarning('LineGraph', 'Please use "PbLineGraph" instead.');
+    }, []);
+
   return (
     <HighchartsReact
         containerProps={{

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb

@@ -39,8 +39,8 @@
         tooltip_id: "append-to-tooltip-2",
         offset: true,
         position: "top",
-        append_to: ".kit-show-wrapper",
+        append_to: ".pb--page--sideNav",
     }) do %>
-        I'm a popover. I have been appended to the .kit-show-wrapper.
+        I'm a popover. I have been appended to the .pb--page--sideNav.
     <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.jsx

@@ -54,14 +54,15 @@ const PopoverAppendTo = (props) => {
         <Body text="Click info for more details" />
         &nbsp;
         <PbReactPopover
-            appendTo=".kit-show-wrapper"
+            appendTo=".pb--page--sideNav"
             offset
             placement="top"
             reference={selectorPopoverReference}
             show={showSelectorPopover}
+            zIndex={10}
             {...props}
         >
-          {'I\'m a popover. I have been appended to the .kit-show-wrapper.'}
+          {'I\'m a popover. I have been appended to the .pb--page--sideNav.'}
         </PbReactPopover>
       </Flex>
     </>

data/app/pb_kits/playbook/pb_radio/docs/_radio_error.md

@@ -1 +1 @@
-Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).
+Error shows that the radio option must be selected or is invalid (i.e. when used in a form it signals a user to fix an error).

data/app/pb_kits/playbook/pb_select/_select.tsx

@@ -29,6 +29,7 @@ type SelectProps = {
   id?: string,
   includeBlank?: string,
   inline?: boolean,
+  inputOptions?: {[key: string]: string | number | boolean | (() => void)},
   label?: string,
   margin: string,
   marginBottom: string,
@@ -63,6 +64,7 @@ const Select = ({
   label,
   htmlOptions = {},
   inline = false,
+  inputOptions = {},
   multiple = false,
   name,
   onChange = () => undefined,
@@ -94,14 +96,17 @@ const Select = ({
   const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
 
   const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
+  const selectId = (inputOptions?.id as string) || name
+
   const selectBody =(() =>{
     if (children) return children
     return (
       <select
           {...htmlOptions}
           {...domSafeProps(props)}
+          {...inputOptions}
           disabled={disabled}
-          id={name}
+          id={selectId}
           multiple={multiple}
           name={name}
           onChange={onChange}
@@ -125,7 +130,7 @@ const Select = ({
       {label &&
         <label
             className="pb_select_kit_label"
-            htmlFor={name}
+            htmlFor={selectId}
         >
           <Caption 
               dark={props.dark}
@@ -135,7 +140,7 @@ const Select = ({
       }
       <label
           className={selectWrapperClass}
-          htmlFor={name}
+          htmlFor={selectId}
       >
         {selectBody}
         { multiple !== true ?

data/app/pb_kits/playbook/pb_select/docs/_select_error.md

@@ -1 +1 @@
-Select w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).
+Select w/ Error shows that an option must be selected or is invalid (i.e. when used in a form it signals a user to fix an error).

data/app/pb_kits/playbook/pb_select/docs/_select_input_options.html.erb

@@ -0,0 +1,16 @@
+<%= pb_rails("select", props: {
+  label: "Favorite Food",
+  name: "favorite_food",
+  options: [
+    { value: "pizza", value_text: "Pizza" },
+    { value: "tacos", value_text: "Tacos" },
+    { value: "sushi", value_text: "Sushi" }
+  ],
+  input_options: {
+    'aria-label': "Select your favorite food",
+    class: "custom-select-class",
+    data: { controller: "search", action: "change->search#filter" },
+    id: "favorite-food-select"
+  }
+}) %>
+

data/app/pb_kits/playbook/pb_select/docs/_select_input_options.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import Select from '../_select'
+
+const SelectInputOptions = (props) => {
+  const options = [
+    { value: 'pizza', text: 'Pizza' },
+    { value: 'tacos', text: 'Tacos' },
+    { value: 'sushi', text: 'Sushi' },
+  ]
+
+  return (
+    <>
+      <Select
+          inputOptions={{
+            'aria-label': 'Select your favorite food',
+            className: 'custom-select-class',
+            id: 'favorite-food-select',
+          }}
+          label="Favorite Food"
+          name="favorite_food"
+          options={options}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default SelectInputOptions
+

data/app/pb_kits/playbook/pb_select/docs/_select_input_options.md

@@ -0,0 +1 @@
+Use the `input_options` / `inputOptions` prop to pass additional attributes directly to the underlying `<select>` element instead of the outer wrapper. This is useful for applying data attributes, custom IDs, or other HTML attributes that need to be on the select element itself.

data/app/pb_kits/playbook/pb_select/docs/example.yml

@@ -15,6 +15,7 @@ examples:
   - select_inline_compact: Select Inline Compact
   - select_attributes: Select W/ Attributes
   - select_multiple: Select Multiple
+  - select_input_options: Input Options
 
 
 
@@ -33,6 +34,7 @@ examples:
   - select_inline_compact: Select Inline Compact
   - select_multiple: Select Multiple
   - select_react_hook: React Hook
+  - select_input_options: Input Options
 
   swift:
   - select_default_swift: Default

data/app/pb_kits/playbook/pb_select/docs/index.js

@@ -12,3 +12,4 @@ export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
 export { default as SelectMultiple } from './_select_multiple.jsx'
 export { default as SelectReactHook } from './_select_react_hook.jsx'
 export { default as SelectCustomSelectSubheaders } from './_select_custom_select_subheaders.jsx'
+export { default as SelectInputOptions } from './_select_input_options.jsx'

data/app/pb_kits/playbook/pb_select/select.html.erb

@@ -2,11 +2,11 @@
   id: nil,
   class: object.classnames ) do %>
   <% if object.label %>
-    <label class="pb_select_kit_label" for="<%= object.name %>">
+    <label class="pb_select_kit_label" for="<%= object.input_options[:id] || object.name %>">
       <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>
     </label>
   <% end %>
-  <label class="<%= object.select_wrapper_class %>" for="<%= object.name %>">
+  <label class="<%= object.select_wrapper_class %>" for="<%= object.input_options[:id] || object.name %>">
     <% if content.present? %>
       <%= content %>
       <%= pb_rails("body", props: { status: "negative", text: object.error }) %>

data/app/pb_kits/playbook/pb_select/select.rb

@@ -14,6 +14,8 @@ module Playbook
       prop :error
       prop :include_blank
       prop :inline, type: Playbook::Props::Boolean, default: false
+      prop :input_options, type: Playbook::Props::HashProp,
+                           default: {}
       prop :label
       prop :multiple, type: Playbook::Props::Boolean, default: false
       prop :name
@@ -38,7 +40,7 @@ module Playbook
           multiple: multiple,
           onchange: onchange,
           include_blank: include_blank,
-        }.merge(attributes)
+        }.merge(attributes).merge(input_options)
       end
 
       def classname

data/app/pb_kits/playbook/pb_select/select.test.js

@@ -65,4 +65,27 @@ test('returns multiple variant', () => {
   const selectElement = kit.querySelector('select');
 
   expect(selectElement).toHaveAttribute('multiple', '');
+});
+
+test('inputOptions are passed to select element', () => {
+  render(
+    <Select
+        data={{ testid: testId }}
+        inputOptions={{
+          id: 'custom-select-id',
+          className: 'custom-select-class',
+          'aria-label': 'Custom aria label',
+        }}
+        label="Favorite Food"
+        name="food"
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const selectElement = kit.querySelector('select')
+
+  expect(selectElement).toHaveAttribute('id', 'custom-select-id')
+  expect(selectElement).toHaveClass('custom-select-class')
+  expect(selectElement).toHaveAttribute('aria-label', 'Custom aria label')
 });