Skip to main content

select

ListSection​

from dara.components.common.select import ListSection

class ListSection(BaseModel)

A class for building lists, takes a header and a list of Item objects to display.

Arguments:

  • label: The header to render for this section
  • items: A list of items for this section as an Item, str or dict list

Attributes​

  • label: str
  • items:

Select​

from dara.components.common.select import Select

class Select(FormComponent)

Select

The Select component accepts a value and a set of items to choose from. The items should be a list of strings that or a list of Item instances that define a string label and a value of another type (must be json serializable). If the multiselect option is True then multiple items can be selected at a time, and if the searchable option is True the list of items becomes searchable. The value passed must be a Variable instance and it will be updated with the underlying value when the option is changed.

A Select component is created via:


from dara.core import Variable
from dara.components.common import Select

Select(
    value=Variable('first'),
    items=['first', 'second', 'third'],
)

A searchable Select component is created via:


from dara.core import Variable
from dara.components.common import Select

Select(
    value=Variable('first'),
    items=['first', 'second', 'third'],
    searchable=True,
)

A more complicated example with explicit item labels/values that allows multiple items to be selected at the same time:


from dara.core import Variable
from dara.components.common import Select, Item

Select(
    items=[Item(label='first',value=1), Item(label='second',value=2)],
    value=Variable([1, 2]),
    multiselect=True
)

Example of using a seclect component to allow selections in a sectioned list:

from dara.components.common import Select, ListSection

Select(
    items=[ListSection(label='Section 1', items=['1 item 1', '1 item 2', '1 item 3']), ListSection(label='Section 2', items=['2 item 1', '2 item 2'])],
    searchable=True,
)

Arguments:

  • id: the key to be used if this component is within a form
  • items: An array of ListSection, Item or strings that defines the options to render
  • max_rows: An optional number of rows to fit in a multiselect
  • multiselect: Boolean, if True more than one item can be selected
  • onchange: Action triggered when the select value has changed.
  • placeholder: Placeholder text to be displayed when the select is empty
  • searchable: Boolean, if True the items can be filtered via a search term
  • value: A Variable instance recording the component's state

Attributes​

  • id: Optional[str]
  • multiselect: bool
  • searchable: bool
  • items: Union[, NonDataVariable]
  • max_rows: int
  • onchange: Optional[Action]
  • placeholder: Optional[str]
  • value: