Form Select

The Select component is a user-friendly form control designed to let users pick an option or multiple options from a set. Upon selection, it presents a dialog showcasing all choices in an easily navigable list, with features like added context messages, error indications, and a disabled mode.

React Component

Variants

Default

The Default variation of the Select component is a simple HTML form element.

Language

Select with Message

The Select component can be used with a message to provide additional context.

Default Currency

The default currency will be used for formatting and calculation purposes.

Select with Message and Help Content

The Select component can display the "Help content" area to provide inline context alongside the label. This area allows text or other components, and may be useful when the Message area is occupied.

Payout currency

What are payouts?

The payout currency determines the currency used when depositing funds to your bank account

Error State

The Select component can indicate an error state.

Text direction

This field is required.

Disabled

The Select component can be marked as disabled. Selects labeled as Disabled will not be submitted in forms.

Text direction

This field is not available until you select a language.

Sage Component

SageFormSelect

<h2>Variants</h2>

<h3>Default</h3>
<p>The Default variation of the Select component is a simple HTML form element.</p>
<%= sage_component SageFormSelect, {
  name: "Language",
  id: "language",
  select_options: [
    {
      text: "de - German",
      value: "de",
    },
    {
      text: "en - English",
      value: "en",
    },
    {
      text: "es - Spanish",
      value: "es",
    },
    {
      text: "fi - Finnish",
      value: "fi",
    },
    {
      text: "fr - French",
      value: "fr",
    },
  ],
} %>

<%= sage_component SageDivider, {} %>

<h3>Select with Message</h3>
<p>The Select component can be used with a message to provide additional context.</p>

<%= sage_component SageFormSelect, {
  name: "Default Currency",
  select_options: [
    {
      text: "USD - United States Dollar",
      value: "USD",
    },
    {
      text: "AED - United Arab Emirates Dirham",
      value: "AED",
    },
    {
      text: "AFN - Afghan Afghani",
      value: "AFN",
    },
    {
      text: "ALL - Albanian Lek",
      value: "ALL",
    },
  ],
  message: "The default currency will be used for formatting and calculation purposes."
} %>

<%= sage_component SageDivider, {} %>

<h3>Select with Message and Help Content</h3>
<p>The Select component can display the "Help content" area to provide inline context alongside the label. This area allows text or other components, and may be useful when the Message area is occupied.</p>

<% sample_help_content = sage_component SageLink, {
    url: "https://help.kajabi.com",
    label: "What are payouts?",
    external: true,
    launch: true,
    help_link: false,
    show_label: true,
    style: "secondary",
  } %>

<%= sage_component SageFormSelect, {
  label: "Payout currency",
  name: "payout_currency",
  select_options: [
    {
      text: "USD - United States Dollar",
      value: "USD",
    },
    {
      text: "CAD - Canadian Dollar",
      value: "CAD",
    },
    {
      text: "AUD - Australian Dollar",
      value: "AUD",
    },
    {
      text: "GBP - British Pound",
      value: "GBP",
    },
  ],
  message: "The payout currency determines the currency used when depositing funds to your bank account",
  help_content: sample_help_content,
} %>

<%= sage_component SageDivider, {} %>

<h3>Error State</h3>
<p>The Select component can indicate an error state.</p>

<%= sage_component SageFormSelect, {
  name: "Text direction",
  has_error: true,
  select_options: [
    {
      text: "Left to right (ltr)",
      value: "ltr",
    },
    {
      text: "Right to left (rtl)",
      value: "rtl",
    },
  ],
  message: "This field is required."
} %>

<%= sage_component SageDivider, {} %>

<h3>Disabled</h3>
<p>The Select component can be marked as disabled. Selects labeled as Disabled will not be submitted in forms.</p>

<%= sage_component SageFormSelect, {
  name: "Text direction",
  disabled: true,
  select_options: [
    {
      text: "Left to right (ltr)",
      value: "ltr",
    },
    {
      text: "Right to left (rtl)",
      value: "rtl",
    },
  ],
  message: "This field is not available until you select a language."
} %>

Property	Description	Type	Default
`disabled`	Enabling this property adds the `disabled` attribute to the component. `disabled` inputs are not submitted in forms.	Boolean	`false`
`has_error`	Enabling this property styles the select in the default danger color theme.	Boolean	`false`
`help_content`	Sets the content for the "help content" area adjacent to the select's label	String	`nil`
`message`	Displays the message text for the component.	String	`nil`
`name`	Unique identifier for this component.	String	`nil`
`select_options`	An array of items that will serve as the `<select>`'s `<option>`s and `<optgroup>`s.	`Array<{ text: String, value: String (optional), disabled: Boolean (false), selected: Boolean (false), group_label: String, group_options: Array<{ text: String, value: String (optional), disabled: Boolean (false), selected: Boolean (false), group_label: String (optional), group_options: Array (optional), }>, }>`	`nil`

Use the sage-btn-group for more than one button to apply spacing
If the context does not already provide positioning settings (such as inside a card or panel footer) use the sage-btn-group--align-end to place buttons on the right side of a space.