'%20d='M64%205c-3%2018-15%2026-13%2043-9-5-13-13-13-22C20%2043%2015%2062%2022%2082c7%2022%2023%2037%2042%2041%2022-4%2039-21%2043-43%203-17-3-32-18-45%202%2011%200%2018-6%2025C84%2036%2075%2019%2064%205Z'%20/%3e%3cpath%20fill='url(%23heat)'%20d='M64%2045c-2%2015-14%2022-13%2038-5-4-8-9-9-15-7%2010-8%2020-4%2030%205%2012%2014%2020%2026%2023%2013-3%2023-12%2027-25%203-11%200-20-8-29%200%207-2%2012-6%2016%201-16-5-27-13-38Z'%20/%3e%3c!--%20The%20glasses%20render%20as%20two%20stacked%20stroke%20groups:%20a%20pale%20warm%20casing%20under%20a%20dark%20warm-charcoal%20stroke.%20The%20casing%20keeps%20the%20dark%20strokes%20legible%20where%20they%20leave%20the%20flame%20body%20(temple%20tips,%20lower%20rims)%20on%20dark%20backgrounds,%20and%20reads%20as%20a%20rim%20light%20against%20the%20flame%20on%20light%20ones.%20--%3e%3cg%20fill='none'%20stroke='%23ffe3ae'%20stroke-opacity='0.85'%20stroke-linecap='round'%20stroke-linejoin='round'%3e%3cpath%20stroke-width='14'%20d='M7%2063c12-4%2027-5%2043-1M78%2062c16-4%2031-3%2043%201'/%3e%3crect%20x='12'%20y='58'%20width='46'%20height='35'%20rx='13'%20stroke-width='14'/%3e%3crect%20x='70'%20y='58'%20width='46'%20height='35'%20rx='13'%20stroke-width='14'/%3e%3cpath%20stroke-width='13'%20d='M57%2066c5-4%209-4%2014%200'/%3e%3c/g%3e%3cg%20fill='none'%20stroke='%2333221b'%20stroke-linecap='round'%20stroke-linejoin='round'%3e%3cpath%20stroke-width='8'%20d='M7%2063c12-4%2027-5%2043-1M78%2062c16-4%2031-3%2043%201'/%3e%3crect%20x='12'%20y='58'%20width='46'%20height='35'%20rx='13'%20stroke-width='8'/%3e%3crect%20x='70'%20y='58'%20width='46'%20height='35'%20rx='13'%20stroke-width='8'/%3e%3cpath%20stroke-width='7'%20d='M57%2066c5-4%209-4%2014%200'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Forms and controls
Combobox
No summary has been written for Combobox. Everything below is generated from the declaration shipped in 0.57.40 and describes the real contract.Public export
typescript
import { Combobox } from '@happyvertical/smrt-ui/forms';- Import path
@happyvertical/smrt-ui/forms- Props
- 19
- Props described
- 19 of 19
- Bindable state
- 0
- Callback events
- 2
- Verified release
- 0.57.40
Props
NameTypeRequiredDescription
optionsControlOption[]YesArray of options to select from.valuestringNoCurrently selected option value (bindable).labelstringYesLabel for the combobox control.namestringNoHTML form field name.placeholderstringNoPlaceholder text shown when value is empty.disabledbooleanNoWhether the control is disabled.requiredbooleanNoWhether the control is required.allowCustombooleanNoWhether users can enter values not in the options list.interactionControlInteractionOptions | falseNoInteraction options or false to disable all.valueLabelstringNoLabel for `value` while its option is not in `options` yet (options load asynchronously, or only the current record is known). Without it the field stays empty rather than flashing the raw value (an id).filterbooleanNoWhether typing filters `options` by label. Set `false` when the caller supplies the matching options itself (server-side search via `onquery`), so a result that matched on something other than its label stays listed.onquery(query: string) => voidNoCalled with the text to search for when the list opens (empty) and on every keystroke. Pair with `filter={false}` and fresh `options`.statusstringNoMessage announced politely to assistive technology while the list is open ("Searching…", "3 results", "No results"). It is also shown inside the list while there are no options to list.busybooleanNoMarks the combobox busy while options are being fetched.invalidbooleanNoMarks the field invalid (`aria-invalid`).describedbystringNoIds of elements describing the field (error text, hints).optionContentSnippet<[ControlOption]>NoCustom content for one option row; defaults to the label.onvaluechange(value: string) => voidNoCallback when the selected value changes.classstringNoCSS class to apply to the combobox container.Bindable state
This component has no bindable public state.
Callback events
onquery(query: string) => voidonvaluechange(value: string) => void