Skip to content
Cynosurev0.5.0
SearchStorybookGitHubnpmColour mode: System. Switch to Light

Components / Foundations

TextAreaBase

The native <textarea> for Cynosure, and the only module allowed to render one. It is a foundation: no visual opinions, so composites style it.

Who uses itLink to "Who uses it"

TextArea.

When to use it directlyLink to "When to use it directly"

Only when building a new multi-line text composite that needs a native textarea.

Use a component instead when you want a multi-line text box: TextArea. For single-line text use TextField.

Accepts text and invalid

UsageLink to "Usage"

tsx
Copy
import { TextAreaBase } from "@arshad-shah/cynosure";

<TextAreaBase className="my-notes" name="notes" rows={4} invalid={hasError} />

PropsLink to "Props"

It accepts every native textarea attribute, plus invalid.

Every prop of TextAreaBase
PropWhat it doesTypeDefault
invalid
Maps to aria-invalid.boolean

Generated from the type definitions in @arshad-shah/cynosure 0.5.0.

GuaranteesLink to "Guarantees"

  • invalid maps to aria-invalid; when it is not set, the attribute is omitted.
  • The ref reaches the native <textarea>.
  • No styling: composites add their own classes.

TextArea · InputBase

These examples run Cynosure 0.5.0 (commit 50ce30b), the version on npm.

Getting started
Theming
Icons
Accessibility
Code editors and highlighters
Using Cynosure without React
Build-tool adapters
Components
Accordion
AppShell
AspectRatio
Breadcrumbs
Calendar
Card
Container
Disclosure
Divider
DocumentViewport
Grid
Inline
PageHeader
PanZoomCanvas
ScrollArea
SideNav
SortableList
SplitPane
Stack
StatusBar
Tabs
TitleBar
Toolbar
Tree
VirtualList
ZoomControls
Announcer
Avatar
Badge
CodeBlock
DescriptionList
EmptyState
ErrorBoundary
Field
Heading
IconTile
Image
Kbd
List
LoadingDots
Notice
ProgressBar
Prose
Skeleton
Stat
Steps
Table
Text
Button
Checkbox
Checklist
ColorField
ColorSwatches
Combobox
CompareSlider
CopyButton
DateField
FileDrop
IconButton
KeyValueEditor
Link
NumberField
Pagination
PathField
RadioGroup
SearchField
SegmentedControl
Select
SelectionFrame
SignaturePad
Slider
Switch
TagInput
TextArea
TextField
ThemeToggle
TimeField
ButtonBase
ChoiceBase
DialogBase
FileInputBase
HiddenValue
Icon
InputBase
LinkBase
LiveRegion
TextAreaBase
ChatMessage
Choice
DataGrid
DeviceFrame
HighlightedText
HotkeyField
ListRow
OptionList
OverlayFrame
QRCode
RowActions
Section
SiteFooter
SiteHeader
SkipLink
SortButton
VisuallyHidden
CommandPalette
ContextMenu
Dialog
FloatingToolbar
HoverCard
Menu
Menubar
Popover
ProgressOverlay
Sheet
Toast
Tooltip
Changelog