Getting Started
Default
Empty state with autoSize between 3 and 8 rows.
import { useState } from "react"
import { Body1, Flex, TextArea } from "@appboxo/ui-kit"
import { PreviewLayout } from "./_section"
export function TextareaDefaultPreview() {
const [value, setValue] = useState("")
return (
<PreviewLayout>
<Flex vertical gap={6}>
<Body1 weight="semibold">Tell us about yourself</Body1>
<TextArea
value={value}
onChange={(_e, v) => setValue(v)}
placeholder="A few words…"
autoSize={{ minRows: 3, maxRows: 8 }}
/>
</Flex>
</PreviewLayout>
)
}
Filled
Pre-filled content. autoSize grows the box up to the cap as the user types.
import { useState } from "react"
import { Body1, Flex, TextArea } from "@appboxo/ui-kit"
import { PreviewLayout } from "./_section"
export function TextareaFilledPreview() {
const [value, setValue] = useState(
"App froze on the checkout screen after I tapped Confirm. Lost my session twice."
)
return (
<PreviewLayout>
<Flex vertical gap={6}>
<Body1 weight="semibold">Bug report</Body1>
<TextArea
value={value}
onChange={(_e, v) => setValue(v)}
autoSize={{ minRows: 3, maxRows: 8 }}
/>
</Flex>
</PreviewLayout>
)
}
Error
hasError mirrors Input.
import { Body1, Flex, Footnote2, TextArea } from "@appboxo/ui-kit"
import { PreviewLayout } from "./_section"
export function TextareaErrorPreview() {
return (
<PreviewLayout>
<Flex vertical gap={6}>
<Body1 weight="semibold">Notes</Body1>
<TextArea value="too short" hasError rows={3} onChange={() => {}} />
<Footnote2 color="text-3">Minimum 20 characters.</Footnote2>
</Flex>
</PreviewLayout>
)
}
Disabled
Greyed out + non-interactive.
import { Body1, Flex, TextArea } from "@appboxo/ui-kit"
import { PreviewLayout } from "./_section"
export function TextareaDisabledPreview() {
return (
<PreviewLayout>
<Flex vertical gap={6}>
<Body1 weight="semibold">Read-only summary</Body1>
<TextArea
value="System-generated transcript. Locked for audit."
disabled
rows={3}
/>
</Flex>
</PreviewLayout>
)
}
Installation
pnpm add @appboxo/ui-kitBuild mini-apps with Boxo
Freedom UI Kit is the design system behind partner mini-apps shipping on the Boxo platform.
Learn more about Boxo