@navikt/ds-react/esm/form/search/Search.d.ts

React components from the Norwegian Labour and Welfare Administration.

import React, { InputHTMLAttributes } from "react";
import { FormFieldProps } from "../useFormField.js";
import { SearchButtonType } from "./SearchButton.js";
export type SearchClearEvent = {
    trigger: "Click";
    event: React.MouseEvent<HTMLButtonElement, MouseEvent>;
} | {
    trigger: "Escape";
    event: React.KeyboardEvent<HTMLDivElement>;
};
export interface SearchProps extends Omit<FormFieldProps, "readOnly">, Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "type"> {
    children?: React.ReactNode;
    /**
     * Search label.
     *
     * Will be hidden by default and is required for WCAG compliance.
     */
    label: React.ReactNode;
    /**
     * Shows label and description for screenreaders only.
     * @default true
     */
    hideLabel?: boolean;
    /**
     * Callback for value-change in input.
     */
    onChange?: (value: string) => void;
    /**
     * Callback for click on clear-button or Escape keydown.
     */
    onClear?: (e: SearchClearEvent) => void;
    /**
     * Callback for Search-button submit.
     */
    onSearchClick?: (value: string) => void;
    /**
     * Sets the `aria-label` for the clear button.
     * @default "Tøm feltet"
     * @deprecated Use `<Provider />`-component
     */
    clearButtonLabel?: string;
    /**
     * Removes clear-button if `false`.
     * @default true
     */
    clearButton?: boolean;
    /**
     * Changes button-variant.
     *
     * - "primary": When this is the main function of the page.
     * - "secondary": This is probably the one you want if in doubt.
     * - "simple": Removes the search button.
     * @default "primary"
     */
    variant?: "primary" | "secondary" | "simple";
    /**
     * HTML size attribute. Specifies the width of the input, in characters.
     */
    htmlSize?: number | string;
}
interface SearchComponent extends React.ForwardRefExoticComponent<SearchProps & React.RefAttributes<HTMLDivElement>> {
    Button: SearchButtonType;
}
/**
 * A component that displays a search input field.
 *
 * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/search)
 * @see 🏷️ {@link SearchProps}
 *
 * @example
 * ```jsx
 * <form role="search">
 *   <Search label="Søk i alle Nav sine sider" variant="primary" />
 * </form>
 * ```
 */
export declare const Search: SearchComponent;
export default Search;