UNPKG

@octopusdeploy/design-system-components

Version:
117 lines (116 loc) 4.33 kB
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;