@octopusdeploy/design-system-components
Version:
The design systems component library.
117 lines (116 loc) • 4.33 kB
TypeScript
import * as React from "react";
import type { PopoverBasicHelpProps } from "../../Popover";
import type { ValidationState } from "../Primitives/InputValidationMessage";
import type { DescriptionContent } from "../utils/descriptionWithLinks";
export interface TextareaProps {
/**
* The label for the textarea field
*/
label: string;
/**
* The current value of the textarea
*/
value?: string;
/**
* The placeholder text to display when textarea is empty
*/
placeholder?: string;
/**
* The description text to display below the textarea
*/
description?: string | DescriptionContent;
/**
* Validation message to display.
*
* Will default to displaying as an error unless changed with the `validationState` prop.
*/
validationMessage?: string;
/**
* The validation state, used to style the validation message and textarea border.
* Only applied when a `validationMessage` is provided; defaults to `"error"` in that case.
*/
validationState?: ValidationState;
/**
* Whether the field is disabled
*/
disabled?: boolean;
/**
* Whether the field is required
*/
hasRequiredMarker?: boolean;
/**
* Whether to show optional marker
*/
hasOptionalMarker?: boolean;
/**
* Uses a monospace font for textarea
*/
monospace?: boolean;
/**
* PopoverBasicHelp component to display additional help information
*/
popover?: React.ReactElement<PopoverBasicHelpProps>;
/**
* Whether to autofocus the textarea
*/
autoFocus?: boolean;
/**
* Whether the textarea is readonly
*/
readOnly?: boolean;
/**
* The name attribute for the textarea
*/
name?: string;
/**
* The number of visible text lines for the textarea (Default is 4)
*/
rows?: number;
/**
* The maximum number of characters allowed
*/
maxLength?: number;
/**
* The minimum number of characters required
*/
minLength?: number;
/**
* Whether the textarea should automatically resize
*/
autoResize?: boolean;
/**
* The action to perform when the form control field is changed.
*/
onChange: (newValue: string) => void;
}
/**
* Textarea component used for multi-line text input
*
* @remarks Rollout currently paused — do not use in new code until further notice.
* Use `<Text>` instead.
* @see <Text>
* /
/**
* @param props - TextareaProps
* @param props.label - The label for the textarea field
* @param props.value - The current value of the textarea
* @param props.placeholder - The placeholder text to display when textarea is empty
* @param props.description - The description text to display below the textarea
* @param props.validationMessage - Validation message to display
* @param props.validationState - The validation state ('error' | 'success'). Only applied when a `validationMessage` is provided; defaults to 'error' in that case.
* @param props.disabled - Whether the field is disabled
* @param props.hasRequiredMarker - Whether the field is required
* @param props.hasOptionalMarker - Whether to show optional marker
* @param props.monospace - Whether to use a monospace font for the textarea
* @param props.popover - PopoverBasicHelp component to display additional help information
* @param props.autoFocus - Whether to autofocus the textarea
* @param props.readOnly - Whether the textarea is readonly
* @param props.name - The name attribute for the textarea
* @param props.rows - The number of visible text lines for the textarea (Default is 4)
* @param props.maxLength - The maximum number of characters allowed
* @param props.minLength - The minimum number of characters required
* @param props.autoResize - Whether the textarea should automatically resize
* @param props.onChange - The action to perform when the form control field is changed.
*/
export declare function Textarea({ label, value, placeholder, description, validationMessage, validationState, disabled, hasRequiredMarker, hasOptionalMarker, monospace, popover, autoFocus, readOnly, name, rows, maxLength, minLength, autoResize, onChange, }: TextareaProps): import("react/jsx-runtime").JSX.Element;
export default Textarea;