Select
A component that allows users to select an option from a dropdown list.
For more examples, visit the Storybook.
StudsSelect Props
The default value of the select.
The controlled value of the select.
Callback function that is called when the value changes.
If true, the select will be open by default.
If true, the select will be open.
Callback function that is called when the open state changes.
The direction of the select.
The name of the select.
If true, the select will be disabled.
If true, the select is required.
StudsSelectContent Props
If true, the select content will render as a child component.
Event handler called when focus moves to the trigger after closing. It can be prevented by calling event.preventDefault.
Event handler called when the escape key is down. It can be prevented by calling event.preventDefault.
Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.
The positioning mode to use, item-aligned is the default and behaves similarly to a native MacOS menu by positioning content relative to the active item.
The side of the trigger to position the content.
The distance in pixels from the anchor. Only available when position is set to popper.
The alignment of the content when side is set to “right” or “left”.
An offset in pixels from the “start” or “end” alignment options. Only available when position is set to popper.
When true, overrides the side andalign preferences to prevent collisions with boundary edges.
The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check. Only available when position is set to popper.
The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }. Only available when position is set to popper.
The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. Only available when position is set to popper.
The sticky behavior on the align axis. “partial” will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst “always” will keep the content in the boundary regardless. Only available when position is set to popper.
Whether to hide the content when the trigger becomes fully occluded. Only available when position is set to popper.
StudsSelectValue Props
If true, the select value will render as a child component.
The placeholder text for the select value.
StudsSelectItem Props
If true, the select item will render as a child component.
The value of the select item.
If true, the select item will be disabled.
Optional text used for typeahead purposes.
StudsSelectSeparator, StudsSelectScrollUpButton, StudsSelectScrollDownButton, StudsSelectGroup, StudsSelectLabel, StudsSelectTrigger Props
If true, the select separator will render as a child component.
For more examples, visit the Storybook.
StudsSelect Props
The default value of the select.
The controlled value of the select.
Callback function that is called when the value changes.
If true, the select will be open by default.
If true, the select will be open.
Callback function that is called when the open state changes.
The direction of the select.
The name of the select.
If true, the select will be disabled.
If true, the select is required.
StudsSelectContent Props
If true, the select content will render as a child component.
Event handler called when focus moves to the trigger after closing. It can be prevented by calling event.preventDefault.
Event handler called when the escape key is down. It can be prevented by calling event.preventDefault.
Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.
The positioning mode to use, item-aligned is the default and behaves similarly to a native MacOS menu by positioning content relative to the active item.
The side of the trigger to position the content.
The distance in pixels from the anchor. Only available when position is set to popper.
The alignment of the content when side is set to “right” or “left”.
An offset in pixels from the “start” or “end” alignment options. Only available when position is set to popper.
When true, overrides the side andalign preferences to prevent collisions with boundary edges.
The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check. Only available when position is set to popper.
The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }. Only available when position is set to popper.
The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. Only available when position is set to popper.
The sticky behavior on the align axis. “partial” will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst “always” will keep the content in the boundary regardless. Only available when position is set to popper.
Whether to hide the content when the trigger becomes fully occluded. Only available when position is set to popper.
StudsSelectValue Props
If true, the select value will render as a child component.
The placeholder text for the select value.
StudsSelectItem Props
If true, the select item will render as a child component.
The value of the select item.
If true, the select item will be disabled.
Optional text used for typeahead purposes.
StudsSelectSeparator, StudsSelectScrollUpButton, StudsSelectScrollDownButton, StudsSelectGroup, StudsSelectLabel, StudsSelectTrigger Props
If true, the select separator will render as a child component.
For more examples, visit the Storybook.
Parameters
Additional attributes to be added to the input element.
Gets or sets a value indicating whether is read only.
The template to render the selected value.
The template to render when the dropdown is empty.
If true, the dropdown will open when the input is focused.
Gets or sets the row render callback. Use it to set row attributes.
Gets or sets the Popup height.
Callback for when a dropdown is opened.
Callback for when a dropdown is closed.
Specifies wether virtualization is enabled.
Gets or sets a value that determines how many additional items will be rendered before and after the visible region.
Specifies the total number of items in the data source.
The data source.
The property name that indicates if an item is disabled.
The aria label for the empty dropdown.
Gets or sets a value indicating whether the dropdown has a value.
The template to render the header.
For lists of objects, an IEqualityComparer to control how selected items are determined
Gets the items.
Gets the popup identifier.
Gets or sets the selected item.
Gets or sets the selected item changed.
Gets or sets the template.
Gets or sets the value property.
The Virtualize instance.
Specifies additional custom attributes that will be rendered by the component.
Gets or sets the callback that is invoked when the mouse enters an item.
Gets or sets the callback that is invoked when the mouse leaves an item.
A callback that will be invoked when the user right-clicks the component. Commonly used to display a context menu.
Gets or sets the culture used to display localizable data (numbers, dates). Set by default to “CultureInfo.CurrentCulture”.
Gets or sets the inline CSS style.
Gets or sets a value indicating whether this “T:Studs.StudsComponent” is visible. Invisible components are not rendered.