Primitive UI components

Search JS SDK for React
UI components reference

SortSelect

Primitive UI components in Search UI Components package, are headless, building blocks used to create the headless widget templates for React applications. You can use them to scaffold your custom widgets.

This topic describes the anatomy, API reference, and variations of the SortSelect primitive component.

Anatomy

For a complete implementation, put together parts of the UI component as shown in the following code block.

import { SortSelect } from '@sitecore-search/ui';

const MySortSelectComponent = () => (
  <SortSelect.Root>
        <SortSelect.Trigger>
          <SortSelect.SelectValue></SortSelect.SelectValue>
          <SortSelect.Icon></SortSelect.Icon>
        </SortSelect.Trigger>
        <SortSelect.Content>
          <SortSelect.Viewport>
            <SortSelect.Option value={option1}>
                <SortSelect.OptionText>{option1.label}</SortSelect.OptionText>
            </SortSelect.Option>
            <SortSelect.Option value={option2}>
                <SortSelect.OptionText>{option3.label}</SortSelect.OptionText>
            </SortSelect.Option>
          </SortSelect.Viewport>
        </SortSelect.Content>
      </SortSelect.Root>
);

Using the component

The following tabs describe use of the SortSelect primitive component.

Plain component

In your React application, paste the following code block then modify the primitives to match your needs.

() => {
  const [currentValue, setCurrentValue] = React.useState(undefined);

  return (
    <>
      <StyledP>
        <b>Select label:</b> {JSON.stringify(currentValue)}
      </StyledP>

      <SortSelect.Root onValueChange={(v) => setCurrentValue(v)}>
        <SortSelect.Trigger>
          <SortSelect.SelectValue></SortSelect.SelectValue>
          <SortSelect.Icon></SortSelect.Icon>
        </SortSelect.Trigger>
        <SortSelect.Content>
          <SortSelect.Viewport>
            {sortOptions.map((option) => (
              <SortSelect.Option value={option}>
                <SortSelect.OptionText>{option.label}</SortSelect.OptionText>
              </SortSelect.Option>
            ))}
          </SortSelect.Viewport>
        </SortSelect.Content>
      </SortSelect.Root>
    </>
  );
}

Styled variants

Screenshot

Screenshot of an unstyled SortSelect primitive component.

Styled basic

In your React application, paste the following code block then modify the primitives to match your needs.

() => {
  const [currentValue, setCurrentValue] = React.useState(undefined);
  return (
    <>
      <StyledP>
        <b>Select label:</b> {JSON.stringify(currentValue)}
      </StyledP>

      <SortSelect.Root onValueChange={(v) => setCurrentValue(v)}>
        <StyledTrigger>
          <StyledValue></StyledValue>
          <SortSelect.Icon></SortSelect.Icon>
        </StyledTrigger>
        <StyledContent>
          <StyledViewport>
            {sortOptions.map((option, index) => {
              return (
                <StyledOption value={option}>
                  <SortSelect.OptionText>{option.label}</SortSelect.OptionText>
                </StyledOption>
              );
            })}
          </StyledViewport>
        </StyledContent>
      </SortSelect.Root>
    </>
  );
}

With disabled options

In your React application, paste the following code block then modify the primitives to match your needs.

() => {
  const [currentValue, setCurrentValue] = React.useState(undefined);
  return (
    <>
      <StyledP>
        <b>Select label:</b> {JSON.stringify(currentValue)}
      </StyledP>

      <SortSelect.Root onValueChange={(v) => setCurrentValue(v)}>
        <StyledTrigger>
          <StyledValue></StyledValue>
          <SortSelect.Icon></SortSelect.Icon>
        </StyledTrigger>
        <StyledContent>
          <StyledViewport>
            {sortOptions.map((option, index) => {
              return (
                <StyledOption value={option} disabled={index < 4}>
                  <SortSelect.OptionText>{option.label}</SortSelect.OptionText>
                </StyledOption>
              );
            })}
          </StyledViewport>
        </StyledContent>
      </SortSelect.Root>
    </>
  );
}

With a value set

In your React application, paste the following code block then modify the primitives to match your needs.

() => {
  const [currentValue, setCurrentValue] = React.useState({ sortType: 'price', sortDirection: 'asc' });
  return (
    <>
      <StyledP>
        <b>Select label:</b> {JSON.stringify(currentValue)}
      </StyledP>

      <SortSelect.Root value={sortOptions[3]} onValueChange={(v) => setCurrentValue(v)}>
        <StyledTrigger>
          <StyledValue></StyledValue>
          <SortSelect.Icon></SortSelect.Icon>
        </StyledTrigger>
        <StyledContent>
          <StyledViewport>
            {sortOptions.map((option, index) => {
              return (
                <StyledOption value={option}>
                  <SortSelect.OptionText>{option.label}</SortSelect.OptionText>
                </StyledOption>
              );
            })}
          </StyledViewport>
        </StyledContent>
      </SortSelect.Root>
    </>
  );
}

With a default value set

In your React application, paste the following code block then modify the primitives to match your needs.

() => {
  const [currentValue, setCurrentValue] = React.useState({ sortType: 'price', sortDirection: 'asc' });
  return (
    <>
      <StyledP>
        <b>Select label:</b> {JSON.stringify(currentValue)}
      </StyledP>

      <SortSelect.Root defaultValue={sortOptions[3]} onValueChange={(v) => setCurrentValue(v)}>
        <StyledTrigger>
          <StyledValue></StyledValue>
          <SortSelect.Icon></SortSelect.Icon>
        </StyledTrigger>
        <StyledContent>
          <StyledViewport>
            {sortOptions.map((option, index) => {
              return (
                <StyledOption value={option}>
                  <SortSelect.OptionText>{option.label}</SortSelect.OptionText>
                </StyledOption>
              );
            })}
          </StyledViewport>
        </StyledContent>
      </SortSelect.Root>
    </>
  );
}

API reference

This section describes the component or component parts displayed in the anatomy structure. For every component, you will find:

Components to which you can add it as a child.
Components you can add as its child.
Details of any properties you can set.

SortSelect.Root

The SortSelect.Root component contains all the parts of the sort select.

Name	Description
`children`	The children inner to the `SortSelect.Root` component
`value`	Value of the select.
`defaultValue`	Default value for the select.
`onValueChange`	A callback that fires when the select value changes.
`open`	Boolean. Default `false`. A flag to keep the select open
`defaultOpen`	Boolean. Default `false`. A flag to keep the select open
`onOpenChange`	A function that gets triggered when the open status changes.
`dir`	String. Default ltr. Orientation of the select. ltr or rtl.
`name`	Name of the select.

SortSelect.Trigger

The SortSelect.Trigger component is the button that triggers the select.

Parent: SortSelect.Root

Children: SortSelect.Icon and SortSelect.SelectValue

Name	Description	Default
`asChild`	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.	`false`
`children`	The children of the `SortSelect.Trigger` component

SortSelect.Icon

The AccordionFacets.Root component contains all the parts of an accordion.

Name	Description	Default
`asChild`	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.	`false`
`children`	The children of the `SortSelect.Icon` component

SortSelect.SelectValue

The AccordionFacets.Root component contains all the parts of an accordion.

Name	Description	Default
`asChild`	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.	`false`
`children`	The children of the `SortSelect.Icon` component
`placeholder`	The content that will be rendered inside the `Select.Value` when no value or defaultValue is set.

SortSelect.Content

The SortSelect.Content component pops out when the select is opened.

Parent: SortSelect.Root

Children: SortSelect.Viewport

Name	Description	Default
`asChild`	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.	`false`
`children`	The children of the `SortSelect.Icon` component
`onCloseAutoFocus`	Event handler called when focus moves to the trigger after closing. It can be prevented by calling `event.preventDefault`.
`onEscapeKeyDown`	Event handler called when the escape key is down. It can be prevented by calling `event.preventDefault`.
`onPointerDownOutside`	Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling `event.preventDefault`.

SortSelect.Viewport

The scrolling SortSelect.Viewport component contains all of the items.

Parent: SortSelect.Content

Children: SortSelect.Option

Name	Description	Default
`asChild`	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.	`false`
`children`	The children of the `SortSelect.Icon` component

SortSelect.OptionText

The SortSelect.OptionText component is textual part of the item. It should only contain the text you want to see in the trigger when that item is selected. It should not be styled to ensure correct positioning.

Parent: SortSelect.Option

Name	Description	Default
`asChild`	Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.	`false`

If you have suggestions for improving this article, let us know!

Documentation Assistant

This assistant uses AI to generate responses based on Sitecore documentation. While it has access to official sources, answers may be incomplete or inaccurate and should not be considered official advice or support.

Powered by

k

Protected by reCAPTCHA