Wraps html text with some preset style options in a configurable tag container. When editable is true, the text becomes editable on focus, with accessibility and onChange support. Optionally, a hidden input can store the value for form submission.

Parameters:
NameTypeDescription
propsobject

Component props.

Properties
NameTypeDescription
asHtmlboolean

Whether or not to accept HTML in the content (ignored when editable).

childrenJSX.Element

React element children (ignored when editable).

colorstring

The text color.

contentstring

The text content.

customAttributesobject

Custom attributes for the component.

customClassesstring | Array | object

Custom classes for the component.

sizestring

The font size for the heading.

spacingstring | number | Array | object

The spacing for the component.

tagNamestring

The tag used for the container element.

weightstring

The font weight for the heading.

editableboolean

Whether the text is editable on focus (default false).

onChangefunction

Handler for text changes when editable.

namestring

Optional name attribute when editable.

idstring

Optional id attribute when editable.

useHiddenInputboolean

Whether to include a hidden input for form submission (default false).

refobject | null

Ref to the component.

Since
  • 1.1.15
Source
Returns:

The text component.

Type: 
JSX.Element
Example
// Controlled usage
const [text, setText] = useState("Hello world");
<Text content={text} editable onChange={setText} />

// Self-managed form usage
<form>
  <Text content="Hello world" editable useHiddenInput name="text-field" id="text-1" />
  <button type="submit">Submit</button>
</form>