@app/coreformsTextArea

TextArea

import { TextArea } from '@app/forms/TextArea.styled'
Component Props
value
string
placeholder
string
className
string
placeholderClassName
string
placeholderTextColor
string
hasError
boolean
readOnly
boolean
disabled
boolean
multiline
See `numberOfLines`. Also disables some `textAlign` props.
boolean
numberOfLines
number
textAlign
Might not work if multiline
enum
textAlignVertical
Might not work if multiline
enum
Show Props Schema
const TextAreaProps = z.object({
    value: z
        .string()
        .optional(),
    placeholder: z
        .string()
        .optional()
        .example("Start typing..."),
    className: z
        .string()
        .optional(),
    placeholderClassName: z
        .string()
        .optional(),
    placeholderTextColor: z
        .string()
        .default("hsl(var(--muted))"),
    hasError: z
        .boolean()
        .optional(),
    readOnly: z
        .boolean()
        .optional(),
    disabled: z
        .boolean()
        .optional(),
    multiline: z
        .boolean()
        .default(true)
        .describe("See `numberOfLines`. Also disables some `textAlign` props."),
    numberOfLines: z
        .number()
        .optional(),
    textAlign: z
        .enum(["left", "center", "right"])
        .default("left")
        .describe("Might not work if multiline"),
    textAlignVertical: z
        .enum(["top", "center", "bottom"])
        .default("top")
        .describe("Might not work if multiline"),
})

💡 Could be handy to copy-paste into an AI chat?

Show Props Types
{
    value?: string | undefined;
    placeholder?: string | undefined;
    className?: string | undefined;
    placeholderClassName?: string | undefined;
    placeholderTextColor?: string;
    hasError?: boolean;
    readOnly?: boolean;
    disabled?: boolean;
    /** See `numberOfLines`. Also disables some `textAlign` props. */
    multiline?: boolean;
    numberOfLines?: number | undefined;
    /** Might not work if multiline */
    textAlign?: "left" | "center" | "right";
    /** Might not work if multiline */
    textAlignVertical?: "top" | "center" | "bottom";
}

💡 Could be handy to copy-paste into an AI chat?

File Location

You can find the source of the TextArea component in the following location:

        • TextArea.styled.tsx

Other

Disclaimer - Automatic Docgen

🤖

These dynamic component docs were auto-generated with npm run regenerate-docs. You can hook into automatic docgen by exporting getDocumentationProps from a component file. You’ll want to provide example props from the ComponentProps zod schema, e.g:

TextArea.styled.tsx
/* --- Docs ---------------------- */
 
export const getDocumentationProps = TextAreaProps.documentationProps('TextArea')
TextInputSwitch