> ## Documentation Index > Fetch the complete documentation index at: https://www.beeq.design/llms.txt > Use this file to discover all available pages before exploring further. # Input > Inputs collect short-form user data such as names, email addresses, passwords, codes, and search terms through a single-line field. export const CodeLivePreview = ({code, children, height, removePadding = false, mode = 'shadow'}) => { const previewRef = useRef(null); const BEEQ_ESM_URL = 'https://esm.sh/@beeq/core/dist/beeq/beeq.esm.js'; const BEEQ_CSS_URL = 'https://esm.sh/@beeq/core/dist/beeq/beeq.css'; const BEEQ_ICONS_URL = 'https://esm.sh/@beeq/core/dist/beeq/svg'; const ensureParentBeeqRuntime = () => { if (document.querySelector('script[data-beeq-parent-runtime]')) return; const script = document.createElement('script'); script.type = 'module'; script.src = BEEQ_ESM_URL; script.dataset.beeqParentRuntime = BEEQ_ICONS_URL; document.head.appendChild(script); }; const executeSnippetScripts = (root, runtimeWindow, previewRootArg, skipAttr) => { root.querySelectorAll('script').forEach(oldScript => { if (skipAttr && oldScript.hasAttribute(skipAttr)) return; if (oldScript.src) { const newScript = runtimeWindow.document.createElement('script'); newScript.src = oldScript.src; oldScript.replaceWith(newScript); return; } runtimeWindow.Function('previewRoot', oldScript.textContent || '')(previewRootArg); oldScript.remove(); }); }; const syncIframeMode = iframeDoc => { const root = document.documentElement; const explicitMode = root.getAttribute('bq-mode'); const isDark = root.classList.contains('dark'); const resolvedMode = explicitMode || (isDark ? 'dark' : 'light'); iframeDoc.documentElement.setAttribute('bq-mode', resolvedMode); iframeDoc.body.setAttribute('bq-mode', resolvedMode); }; useEffect(() => { if (mode === 'shadow') ensureParentBeeqRuntime(); }, [mode]); useEffect(() => { const container = previewRef.current; if (!container) return; if (removePadding) container.style.padding = '0'; container.innerHTML = ''; if (mode === 'iframe') { const iframe = document.createElement('iframe'); iframe.className = 'preview-iframe'; iframe.style.width = '100%'; iframe.style.border = '0'; iframe.style.display = 'block'; iframe.style.minHeight = height ?? '0px'; iframe.setAttribute('title', 'Live code preview'); iframe.setAttribute('loading', 'lazy'); iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin'); container.appendChild(iframe); const iframeDoc = iframe.contentDocument; const iframeWin = iframe.contentWindow; if (!iframeDoc || !iframeWin) return; iframeDoc.open(); iframeDoc.write(['', '', '', ' ', ' ', ' ', ` `, ` `, '', '', code, '', ''].join('\n')); iframeDoc.close(); syncIframeMode(iframeDoc); const modeObserver = new MutationObserver(() => syncIframeMode(iframeDoc)); modeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'bq-mode'] }); executeSnippetScripts(iframeDoc, iframeWin, iframeDoc, 'data-beeq-iframe-runtime'); return () => modeObserver.disconnect(); } const shadowRoot = container.shadowRoot ?? container.attachShadow({ mode: 'open' }); if (!shadowRoot.adoptedStyleSheets.length) { const fixSheet = new CSSStyleSheet(); fixSheet.replaceSync(` bq-dropdown::part(panel), bq-panel::part(panel), bq-select::part(panel), bq-date-picker::part(panel) { z-index: 9999; } bq-tooltip::part(panel) { position: absolute; } `); shadowRoot.adoptedStyleSheets = [fixSheet]; } shadowRoot.innerHTML = [``, code].join(''); executeSnippetScripts(shadowRoot, window, shadowRoot); return undefined; }, [code, mode, height]); return
{}
{} {children &&
{children}
}
; }; export const CardTile = ({title, href, imageLightSrc, imageDarkSrc, children, enableImgZoom}) => { if (!href) { return
{imageLightSrc && {title}} {imageDarkSrc && {title}} {title &&

{title}

}
{children}
; } return {imageLightSrc && {title}} {imageDarkSrc && {title}} {title &&

{title}

}
{children}
; }; BEEQ Input component overview BEEQ Input component overview Inputs let users enter a short value in a familiar, single-line control. Use them when people need to type information directly and you want the field to support labels, helper text, inline validation, and optional prefix or suffix content. Use `bq-input` for single-line entry. If the answer may span multiple lines, use a textarea. If the user must pick from known options, use a select or dropdown. If the value is a date, use a date picker. ## When to use Use inputs when * You need a single-line field for names, email addresses, passwords, codes, URLs, or similar short values * Typing is faster than choosing from a list * Users benefit from inline helper text, validation, or browser autofill * The field should accept semantic input types such as `email`, `password`, `search`, or `tel` Do not use inputs when * The user must choose from a fixed set of options * The answer is likely to be long or multi-line * A specialized control would reduce errors, such as a date picker or autocomplete pattern * The field purpose would only be understandable through placeholder text ## Patterns The default pattern for account details, profile data, contact information, and short reference values. Works well for passwords, one-time codes, and other controlled text values where labels and validation matter. Use an input when users refine content by typing a term, especially when the field benefits from a search-specific type or icon. Inputs support browser features such as autofill, autocomplete, and keyboard hints, which help users finish forms faster and with fewer mistakes. ## Anatomy BEEQ Input component anatomy BEEQ Input component anatomy An input combines a persistent label with a single-line text field and optional supporting content. Keep the label visible, use helper text for guidance or feedback, and treat placeholder text as an example rather than an instruction. | Part | Element | Description | | ----- | ------------ | ------------------------------------------------------------------------------- | | **1** | Label | Persistent field name shown through the `label` slot | | **2** | Control | The bordered container that groups the editable field and optional affordances | | **3** | Native input | The actual text input used for typing, autofill, and form submission | | **4** | Prefix | Optional leading content inside the control, usually an icon | | **5** | Suffix | Optional trailing content inside the control, often a status or supporting icon | | **6** | Helper text | Supporting guidance or validation feedback shown below the field | | **7** | Clear button | Optional action that appears when the field has a value and clearing is enabled | ## Design guidelines Arrange related inputs from top to bottom in a logical order. This makes forms easier to scan, reduces grouping mistakes, and supports the natural reading flow better than multi-column layouts. Let field width reflect the kind of value users will enter. Compact fields work well for short codes or ZIP codes, while longer fields suit names, emails, and addresses. Use this sequence when you define an input: Start with the most specific native `type` that matches the data, such as `email`, `password`, `search`, `tel`, or `number`. Make the field purpose clear with a persistent label. Use helper text for extra context and keep placeholder text for examples only. Add semantic attributes such as `autocomplete`, `required`, and `pattern` only when they meaningfully improve completion or validation. When the field has a value and `disable-clear` is not set, the component can surface a built-in clear action. You do not need to build a separate clear button for common text-entry cases. ## Usage ### Default Use the default type of input when you want to provide a simple, versatile field for gathering user input. You do not need to specify any additional property that already uses its default value. :host { inline-size: 100% !important; align-items: stretch !important; } span { display: flex; align-items: center; gap: var(--bq-spacing-xs); } Helper text `} > ```html HTML icon="html5" theme={"theme":{"light":"one-light","dark":"night-owl"}} Helper text ``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqIcon, BqInput } from "@beeq/react"; Helper text ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqIcon, BqInput } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqIcon, BqInput], template: ` Helper text ` }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ### Value Use the `value` attribute to provide a convenient solution for scenarios where the initial input is predefined. :host { inline-size: 100% !important; align-items: stretch !important; } span { display: flex; align-items: center; gap: var(--bq-spacing-xs); } Helper text `} > ```html HTML icon="html5" theme={"theme":{"light":"one-light","dark":"night-owl"}} Helper text ``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqIcon, BqInput } from "@beeq/react"; Helper text ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqIcon, BqInput } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqIcon, BqInput], template: ` Helper text ` }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ### Prefix Use the prefix slot when you want to place an icon before the input value to provide extra context. :host { inline-size: 100% !important; align-items: stretch !important; } span { display: flex; align-items: center; gap: var(--bq-spacing-xs); } Helper text `} > ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} Helper text ``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqIcon, BqInput } from "@beeq/react"; Helper text ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqIcon, BqInput } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqIcon, BqInput], template: ` Helper text ` }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ### Suffix Use the suffix slot when you want to add an icon after the input field for extra context or feedback. :host { inline-size: 100% !important; align-items: stretch !important; } span { display: flex; align-items: center; gap: var(--bq-spacing-xs); } Helper text `} > ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} Helper text ``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqIcon, BqInput } from "@beeq/react"; Helper text ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqIcon, BqInput } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqIcon, BqInput], template: ` Helper text ` }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ### Prefix and Suffix This variant combines both prefix and suffix features within the same input. :host { inline-size: 100% !important; align-items: stretch !important; } span { display: flex; align-items: center; gap: var(--bq-spacing-xs); } Helper text `} > ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} Helper text ``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqIcon, BqInput } from "@beeq/react"; Helper text ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqIcon, BqInput } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqIcon, BqInput], template: ` Helper text ` }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ### Disabled Use the `disabled` attribute when the input field should be visible but non-editable. :host { inline-size: 100% !important; align-items: stretch !important; } span { display: flex; align-items: center; gap: var(--bq-spacing-xs); } Helper text `} > ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} Helper text ``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqIcon, BqInput } from "@beeq/react"; Helper text ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqIcon, BqInput } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqIcon, BqInput], template: ` Helper text ` }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ## Options ### Validation Use this variant for validation feedback by setting `validation-status` to `error`, `success`, `warning`, or `none`. :host { inline-size: 100% !important; align-items: stretch !important; flex-direction: column !important; } span { display: flex; align-items: center; gap: var(--bq-spacing-xs); } Helper text Helper text Helper text `} > ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} Helper text Helper text Helper text ``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqIcon, BqInput } from "@beeq/react"; <> Helper text Helper text Helper text ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqIcon, BqInput } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqIcon, BqInput], template: ` Helper text Helper text Helper text ` }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ### Label with "Optional" Use this style when you want to include an optional marker to provide additional context. :host { inline-size: 100% !important; align-items: stretch !important; } .label-row { display: flex; flex: 1 1 0%; } .label-row > label { display: flex; flex-grow: 1; align-items: center; } .label-row > span { color: var(--bq-text--secondary); } bq-input span[slot="helper-text"] { display: flex; align-items: center; gap: var(--bq-spacing-xs); }
Optional
Helper text `} > ```css styles.css icon="css" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} .label-row { display: flex; flex: 1 1 0%; & > label { display: flex; flex-grow: 1; align-items: center; } & > span { color: var(--bq-text--secondary); } } bq-input span[slot="helper-text"] { display: flex; align-items: center; gap: var(--bq-spacing-xs); } ``` ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}
Optional
Helper text ``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqIcon, BqInput } from "@beeq/react"; import "./styles.css";
Optional
Helper text ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqIcon, BqInput } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqIcon, BqInput], template: `
Optional
Helper text `, styles: [` .label-row { display: flex; flex: 1 1 0%; & > label { display: flex; flex-grow: 1; align-items: center; } & > span { color: var(--bq-text--secondary); } } bq-input span[slot="helper-text"] { display: flex; align-items: center; gap: var(--bq-spacing-xs); } `], }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ### Label with "Info Tooltip" Use this style when you want to include an informational tooltip alongside the input label. :host { inline-size: 100% !important; align-items: stretch !important; } bq-tooltip { margin-inline-start: var(--bq-spacing-xs); } bq-tooltip::part(trigger) { display: flex; } .label-row { display: flex; flex: 1 1 0%; } .label-row > label { display: flex; flex-grow: 1; align-items: center; } .label-row > span { color: var(--bq-text--secondary); } bq-input span[slot="helper-text"] { display: flex; align-items: center; gap: var(--bq-spacing-xs); }
Optional
Helper text `} > ```css styles.css icon="css" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} bq-tooltip { margin-inline-start: var(--bq-spacing-xs); &::part(trigger) { display: flex; } } .label-row { display: flex; flex: 1 1 0%; & > label { display: flex; flex-grow: 1; align-items: center; } & > span { color: var(--bq-text--secondary); } } bq-input span[slot="helper-text"] { display: flex; align-items: center; gap: var(--bq-spacing-xs); } ``` ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}
Optional
Helper text ``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqIcon, BqInput, BqTooltip } from "@beeq/react"; import "./styles.css";
Optional
Helper text ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqIcon, BqInput, BqTooltip } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqIcon, BqInput, BqTooltip], template: `
Optional
Helper text `, styles: [` bq-tooltip { margin-inline-start: var(--bq-spacing-xs); &::part(trigger) { display: flex; } } .label-row { display: flex; flex: 1 1 0%; & > label { display: flex; flex-grow: 1; align-items: center; } & > span { color: var(--bq-text--secondary); } } bq-input span[slot="helper-text"] { display: flex; align-items: center; gap: var(--bq-spacing-xs); } `], }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ### With no label Use this variant when the surrounding context already makes the field purpose clear and a visible label would be redundant. :host { inline-size: 100% !important; align-items: stretch !important; } span { display: flex; align-items: center; gap: var(--bq-spacing-xs); } Helper text `} > ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} Helper text ``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqIcon, BqInput } from "@beeq/react"; Helper text ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqIcon, BqInput } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqIcon, BqInput], template: ` Helper text ` }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ### With no Helper Text Use this variant when the field does not require supplementary guidance. :host { inline-size: 100% !important; align-items: stretch !important; } label { display: flex; flex-grow: 1; align-items: center; } `} > ```html HTML icon="html5" theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ```jsx React icon="react" theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqIcon, BqInput } from "@beeq/react"; ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqIcon, BqInput } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqIcon, BqInput], template: ` ` }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ### Form integration `bq-input` submits its current string value with the form. Combine `name`, `required`, and `form-validation-message` when the field must pass native validation before submission. body { padding: var(--bq-spacing-l); } .input-form { display: grid; gap: var(--bq-spacing-m); } .input-form__actions { display: flex; gap: var(--bq-spacing-s); justify-content: flex-end; } .input-form__output { margin: 0; padding: var(--bq-spacing-s); border: var(--bq-stroke-s) solid var(--bq-stroke--tertiary); border-radius: var(--bq-radius--s); background: var(--bq-ui--secondary); color: var(--bq-text--primary); white-space: pre-wrap; }
Use the address where we should send updates.
Reset Submit 
{}
`} > ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}
Use the address where we should send updates. Reset Submit 
{}
``` ```tsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { useState } from "react"; import { BqButton, BqInput } from "@beeq/react"; export default function InputForm() { const [data, setData] = useState("{}"); return (
setData("{}")} onSubmit={(event) => { event.preventDefault(); setData(JSON.stringify(Object.fromEntries(new FormData(event.currentTarget).entries()), null, 2)); }} > Use the address where we should send updates. Reset Submit 
{data}
); } ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqButton, BqInput } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqButton, BqInput], template: `
Use the address where we should send updates. Reset Submit 
{{ data }}
`, }) export class InputFormComponent { data = "{}"; handleSubmit(event: SubmitEvent): void { event.preventDefault(); this.data = JSON.stringify(Object.fromEntries(new FormData(event.target as HTMLFormElement).entries()), null, 2); } } ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ## Best practices Do Keep labels short, specific, and visible after users start typing. Don't Rely on placeholder text as the only explanation of what the field is for. Do Write helper text that explains format, constraints, or what happens next in plain language. Don't Fill the space under the field with long, repetitive instructions users will skip. Do Match field type, width, and ordering to the data people are expected to enter. Don't Make users jump across multiple columns or guess which fields belong together. Do Explain validation close to the field and tell users how to recover from an error. Don't Use color alone to communicate validity or leave users guessing which format is required. ## Accessibility * Built in: the component forwards semantic input attributes such as `type`, `autocomplete`, `required`, `readonly`, `min`, `max`, `maxlength`, `minlength`, `pattern`, and `step` to the native input element. * Built in: when `disabled` is set, the native input receives `aria-disabled="true"` so assistive technologies can detect the unavailable state. * Built in: the clear button uses `clearButtonLabel` as its accessible name, and the default clear icon is marked `aria-hidden="true"`. * Built in: the component participates in forms and can surface native required-state validity when you combine `required` with `formValidationMessage`. * You must: provide meaningful content in the `label` slot for most cases, even when the surrounding layout makes the field purpose look obvious visually. * You must: treat helper and validation text as instructions, not decoration. Keep it concise and make recovery steps explicit. * You must: avoid placeholder-only labeling because placeholder text disappears as soon as the user types. * You must: add alternate context when you intentionally omit the visible label, so screen reader and keyboard users still understand the field purpose. ## API reference ### Properties | Property | Attribute | Description | Type | Default | | ----------------------- | ------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | --------------- | | `autocapitalize` | `autocapitalize` | Controls capitalization behavior for typed text | `string` | `"off"` | | `autocomplete` | `autocomplete` | Hints whether and how the browser should autocomplete the field | `string` | `"off"` | | `autofocus` | `autofocus` | If `true`, the input is focused on component render | `boolean` | `false` | | `clearButtonLabel` | `clear-button-label` | Accessible label for the clear button | `string` | `"Clear value"` | | `debounceTime` | `debounce-time` | Delay before the `bqInput` event is emitted after the value changes | `number` | `0` | | `disableClear` | `disable-clear` | If `true`, the clear button is hidden | `boolean` | `false` | | `disabled` | `disabled` | Disables the input | `boolean` | `false` | | `form` | `form` | ID of the form the input belongs to | `string` | `undefined` | | `formValidationMessage` | `form-validation-message` | Native validation message used when `required` is set | `string` | `undefined` | | `inputmode` | `inputmode` | Hints the most helpful virtual keyboard for the expected value | `string` | `undefined` | | `max` | `max` | Maximum accepted value for date and number types | `number \| string` | `undefined` | | `maxlength` | `maxlength` | Maximum accepted number of characters | `number` | `undefined` | | `min` | `min` | Minimum accepted value for date and number types | `number \| string` | `undefined` | | `minlength` | `minlength` | Minimum accepted number of characters | `number` | `undefined` | | `name` | `name` | Name of the underlying input | `string` | `undefined` | | `pattern` | `pattern` | Regular expression the value should match | `string` | `undefined` | | `placeholder` | `placeholder` | Placeholder text shown when the field is empty | `string` | `undefined` | | `readonly` | `readonly` | If `true`, the value can be focused and copied but not edited | `boolean` | `undefined` | | `required` | `required` | Marks the field as required | `boolean` | `undefined` | | `step` | `step` | Granularity constraint for compatible input types | `"any" \| number` | `undefined` | | `type` | `type` | Native input type to render | `"date" \| "datetime-local" \| "email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "time" \| "url"` | `"text"` | | `validationStatus` | `validation-status` | Validation state of the control | `"error" \| "none" \| "success" \| "warning"` | `"none"` | | `value` | `value` | Current input value | `number \| string \| string[]` | `undefined` | ### Events | Event | Description | Type | | ---------- | ------------------------------------------------------ | ------------------------------------------------------------------------------ | | `bqBlur` | Fired when the input loses focus | `CustomEvent` | | `bqChange` | Fired when the value changes and the input loses focus | `CustomEvent<{ value: string \| number \| string[]; el: HTMLBqInputElement }>` | | `bqClear` | Fired when the value is cleared | `CustomEvent` | | `bqFocus` | Fired when the input receives focus | `CustomEvent` | | `bqInput` | Fired on every keystroke as the value changes | `CustomEvent<{ value: string \| number \| string[]; el: HTMLBqInputElement }>` | ### Slots | Slot | Description | | ------------- | -------------------------------------------- | | `label` | Label content for the field | | `prefix` | Optional leading content inside the control | | `suffix` | Optional trailing content inside the control | | `helper-text` | Supporting text displayed below the field | | `clear-icon` | Replaces the default clear icon | ### Shadow parts | Part | Description | | ------------- | --------------------------------------- | | `base` | Base wrapper for the component | | `button` | Native button used for the clear action | | `clear-btn` | Clear button container | | `control` | Input control wrapper | | `helper-text` | Helper text container | | `input` | Native HTML input element | | `label` | Label slot container | | `prefix` | Prefix slot container | | `suffix` | Suffix slot container | ### CSS custom properties | Variable | Description | Default | | ------------------------------------ | ---------------------------------------------- | ---------------------------- | | `--bq-input--background-color` | Input background color | `var(--bq-ui--primary)` | | `--bq-input--border-color` | Input border color | `var(--bq-stroke--tertiary)` | | `--bq-input--border-color-focus` | Input border color on focus | `var(--bq-stroke--brand)` | | `--bq-input--border-radius` | Input border radius | `var(--bq-radius--s)` | | `--bq-input--border-style` | Input border style | `solid` | | `--bq-input--border-width` | Input border width | `var(--bq-stroke-s)` | | `--bq-input--gap` | Gap between input content and prefix or suffix | `var(--bq-spacing-xs)` | | `--bq-input--helper-margin-top` | Helper text margin top | `var(--bq-spacing-xs)` | | `--bq-input--helper-text-color` | Helper text color | `var(--bq-text--primary)` | | `--bq-input--helper-text-size` | Helper text size | `var(--bq-font-size--s)` | | `--bq-input--icon-size` | Icon size for prefix, suffix, and clear button | `24px` | | `--bq-input--label-margin-bottom` | Label margin bottom | `var(--bq-spacing-xs)` | | `--bq-input--label-text-color` | Label text color | `var(--bq-text--primary)` | | `--bq-input--label-text-size` | Label text size | `var(--bq-font-size--s)` | | `--bq-input--padding-end` | End padding | `var(--bq-spacing-m)` | | `--bq-input--padding-start` | Start padding | `var(--bq-spacing-m)` | | `--bq-input--paddingY` | Vertical padding | `var(--bq-spacing-s)` | | `--bq-input--text-color` | Input text color | `var(--bq-text--primary)` | | `--bq-input--text-placeholder-color` | Placeholder text color | `var(--bq-text--secondary)` | | `--bq-input--text-size` | Input text size | `var(--bq-font-size--m)` | Learn more about [styling with shadow parts](/guides/styles#component-shadow-dom-parts) and [CSS custom properties](/guides/styles#global-css-custom-properties). ## Resources Explore input variants and states in Storybook. View the component source on GitHub.