HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Filter InputView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA field that narrows something else, beside what is already narrowing it.ExperimentalSince 0.1.0FormsUsageimport'@fusion.dev/helix/filter-input'import'@fusion.dev/helix-headless/filter-input'Preview
API ReferenceRoothelix-filter-inputA field that narrows something else, beside what is already narrowing it.
PropTypeDefaultDescriptionclearablebooleanfalseWhether the field offers a button that empties it.clearLabelstring"Clear"What the clear button is called, since an icon has no name of its own.defaultValuestring""The value the markup declared, which is where a reset returns to.disabledbooleanfalseWhether the control is non-interactive.feedbackstring""What is wrong, in the reader's words rather than the browser's.hintstring""Help under the control, shown while there is nothing wrong.labelstring""The accessible name, and the fallback for the `label` slot.maxTagsnumber0How many tokens to show before the rest become a count.namestring""Name submitted with the form.placeholderstring""Shown while the field is empty.requiredbooleanfalseWhether the form refuses to submit without it.valuestringWhat the control holds now, and what its form submits.
ReadTypeDescriptionformHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionendAfter the text, for a count or a control.startBefore the text, for a search icon.tagsWhat is already narrowing the results, as `Tag`s.
EventTypeDescriptionchangeEventRelayed from the input once the reader has finished.helix-before-changeHelixBeforeChangeEventFired as the text changes, and cancelable.inputEventAnnounced once the text has moved.
MethodTypeDescriptionfocus(options: FocusOptions) => voidPuts the caret in the field, the way a label pointing at one would.requestValue(next: string) => booleanRequests a new value, and reports whether the request stood.
PartDescriptionclearThe button that empties the field.controlThe input itself.feedbackWhat is wrong with it.fieldThe box holding everything.hintHelp under the field, while nothing is wrong.labelThe question, over the field.restHow many tokens did not fit.tagsThe row the tokens sit in.
CSS PropertyDescription--filter-input-background-colorFill behind the field.--filter-input-control-sizeSmallest the text keeps as tokens fill the line, before it wraps to its own.--filter-input-sizeHeight of the field with nothing in it, which it grows from.
Roothelix-headless-filter-inputA field that narrows something else, beside what is already narrowing it.
PropTypeDefaultDescriptionclearablebooleanfalseWhether the field offers a button that empties it.clearLabelstring"Clear"What the clear button is called, since an icon has no name of its own.defaultValuestring""The value the markup declared, which is where a reset returns to.disabledbooleanfalseWhether the control is non-interactive.feedbackstring""What is wrong, in the reader's words rather than the browser's.hintstring""Help under the control, shown while there is nothing wrong.labelstring""The accessible name, and the fallback for the `label` slot.maxTagsnumber0How many tokens to show before the rest become a count.namestring""Name submitted with the form.placeholderstring""Shown while the field is empty.requiredbooleanfalseWhether the form refuses to submit without it.valuestringWhat the control holds now, and what its form submits.
ReadTypeDescriptionformHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionendAfter the text, for a count or a control.startBefore the text, for a search icon.tagsWhat is already narrowing the results, as `Tag`s.
EventTypeDescriptionchangeEventRelayed from the input once the reader has finished.helix-before-changeHelixBeforeChangeEventFired as the text changes, and cancelable.inputEventAnnounced once the text has moved.
MethodTypeDescriptionfocus(options: FocusOptions) => voidPuts the caret in the field, the way a label pointing at one would.requestValue(next: string) => booleanRequests a new value, and reports whether the request stood.
PartDescriptionclearThe button that empties the field.controlThe input itself.feedbackWhat is wrong with it.fieldThe box holding everything.hintHelp under the field, while nothing is wrong.labelThe question, over the field.restHow many tokens did not fit.tagsThe row the tokens sit in.
ExamplesNameDescriptionClearableA button that empties the text, which is not the same as clearing the filter.DismissingBackspace on an empty field asks the same way the close control does.Max TagsA cap for a field in a row, where the rest becomes a count.PreviewA filter field, grown to hold what has already narrowed the rows.PreviewA filter field, grown to hold what has already narrowed the rows.