@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
110 lines (109 loc) • 5.05 kB
TypeScript
import type { HTMLAttributes, KeyboardEventHandler, RefObject } from 'react';
import type { InputProps } from '../../../../components/input/Input';
import type { InputMaskedProps } from '../../../../components/InputMasked';
import type { TextareaProps } from '../../../../components/Textarea';
import type { FieldBlockWidth } from '../../FieldBlock';
import type { TextCounterProps } from '../../../../fragments/TextCounter';
import type { FieldProps } from '../../types';
export type FieldStringProps = FieldProps<string, undefined | string> & {
/**
* True to be able to write in multiple lines (switching from input-element to textarea-element).
*/
multiline?: boolean;
/**
* Class name set on the `<input>` DOM element.
*/
inputClassName?: string;
/**
* By providing a `React.Ref` we can get the internally used input element (DOM).
*/
ref?: RefObject<HTMLInputElement | HTMLTextAreaElement>;
/**
* `false` for no width (use browser default), `small`, `medium` or `large` for predefined standard widths, `stretch` to fill available width.
*/
width?: FieldBlockWidth;
/** The size of the input. Available sizes: `small`, `medium` (default), `large`. */
size?: InputProps['size'] | TextareaProps['size'];
/** If set to `true` the placeholder will remain visible when the field has focus. */
keepPlaceholder?: InputProps['keepPlaceholder'];
/**
* Validation for minimum length of the text (number of characters).
*/
minLength?: number;
/**
* Validation for maximum length of the text (number of characters).
*/
maxLength?: number;
/**
* Validation based on regex pattern.
*/
pattern?: string;
/** HTML input type attribute, e.g. `text`, `password`, `search`. Defaults to `text`. */
type?: InputProps['type'];
/** Text alignment inside the input: `left`, `center`, or `right`. */
align?: InputProps['align'];
/** If `true`, all text in the input is selected on focus. */
selectAll?: InputProps['selectAll'];
/** If `true`, shows a clear button inside the input. */
clear?: boolean;
/** Input mask configuration for masked input patterns. */
mask?: InputMaskedProps['mask'];
/** If `true`, allows typing beyond the defined mask boundaries. */
allowOverflow?: InputMaskedProps['allowOverflow'];
/**
* For icon at the left side of the text input. Only one of `leftIcon` or `rightIcon` can be used at the same time.
*/
leftIcon?: string;
/**
* For icon at the right side of the text input. Only one of `leftIcon` or `rightIcon` can be used at the same time.
*/
rightIcon?: string;
/**
* Accepts a React element which will show up where the "submit button" would do.
*/
submitElement?: InputProps['submitElement'];
/**
* When set to `true`, it will capitalize the first letter of every word, transforming the rest to lower case.
*/
capitalize?: boolean;
/**
* When `true`, it will trim leading and trailing whitespaces on blur, triggering `onChange` if the value changes.
*/
trim?: boolean;
/**
* To be used together with `multiline`. Set how many rows of text can be shown by default. Defaults to `2`.
*/
rows?: TextareaProps['rows'];
/**
* To be used together with `multiline`. Set how many rows of text can be shown at max. Defaults to `6`.
*/
autoResizeMaxRows?: TextareaProps['autoResizeMaxRows'];
/**
* To be used together with `multiline`. Set true to expand when writing longer texts. Defaults to `true`.
*/
autoResize?: TextareaProps['autoResize'];
/**
* To be used together with `multiline`. Use a number to define the displayed max length e.g. `40` or `{ max: 40, variant: 'down' }`.
*/
characterCounter?: Omit<TextCounterProps, 'text'> | number;
/**
* For HTML [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) attributes.
*/
autoComplete?: HTMLInputElement['autocomplete'];
/**
* Define an [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).
*/
inputMode?: HTMLAttributes<HTMLInputElement>['inputMode'];
/** Controls browser autocorrect behavior. */
autoCorrect?: HTMLAttributes<HTMLInputElement>['autoCorrect'];
/** Controls browser spell-checking behavior. */
spellCheck?: HTMLAttributes<HTMLInputElement>['spellCheck'];
/** If `true`, the input receives focus when the component mounts. */
autoFocus?: HTMLAttributes<HTMLInputElement>['autoFocus'];
/** Controls text auto-capitalization on touch devices. */
autoCapitalize?: HTMLAttributes<HTMLInputElement>['autoCapitalize'];
/** Callback fired when a key is pressed while the input has focus. */
onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
};
declare function StringComponent(props: FieldStringProps): import("react/jsx-runtime").JSX.Element;
export default StringComponent;