Dropdown

In progress
Aria
RTL

A form component - list of options to be selected. Acts pretty close to select.

Dropdown

Anatomy

<Form>
  <Form.Field>
    <Form.Dropdown options={...} />
  </Form.Field>
</Form>

Default

Some hint here

Some hint here

Some hint here

States

Some hint here

Some hint here

Some hint here

Multiple

Some hint here

Some hint here

Some hint here

Custom

Form.Dropdown props
Fully styled select component for the forms
Name Type Required Default Description
id string No - Id to be given to the select tag
options list Yes - ... format: [%{key: shown_label, value: option_value, disabled: bool}], diisabled is optional
field atom No - Name of the field, usually should be taken from context
form form No - Form info, usually should be taken from context
value any No - Selected option(s) value - do not use it inside the form, just for away-from-form components
disabled boolean No - Well, disabled
size sm | md | lg No "md" Common moon size property
class css_class No - Additional classes for the <select> tag
prompt string No - Some prompt to be shown on empty value
testid string No - Data-testid attribute value
error boolean No - Some additional styling will be set to indicate field is iinvalid
is_multiple boolean No - If field does support multiselect, `multiple` attribute for select tag in HTML terms
is_open boolean No - Should dropdown be open
default slot No - Option for custom stylings - use it to show icons or anything else
trigger slot No - Trigger element for the dropdown, default is Dropdown.Select
option slot No - Slot used for rendering single option. option[:key] will be used if not given
Dropdown.Select props
Element that triggers Dropdown component, renders as a button
Name Type Required Default Description
id string No - Id attribute for html tag
testid string No - Data-testid attribute for html tag
class css_class No - Additional CSS classes for the html tag
prompt string No "..." Text to be shown when no value given
value string No - Value to be shown
badge integer No - Badge to show selected items count or smth else
error boolean No - Some additional styling will be set to indicate field is iinvalid
is_open boolean No - If the open indicator is active or not
size sm | md | lg No - Site of the select
disabled boolean No - If the item should be marked as disabled
on_click event No - Event that fired when trigger is clicked
default slot No - Content of the button