Forms

Rich Text

Minimal rich text editor with configurable actions, emoji support, and character limits.

Rich Editor

A minimal contentEditable wrapper with basic formatting.

Post Content

'use client'

import React from 'react'
import { RichText } from 'biibaos'

export default function App() {
  return (
    <RichText 
      label="Post Content"
      placeholder="What's on your mind? ✨"
      defaultValue="<h1>Hello</h1><p>Start typing...</p>"
      onChange={(html) => console.log(html)}
    />
  )
}

Character Limit

Restrict the length of the input with a visual counter.

Short Bio

0 / 100

'use client'

import React from 'react'
import { RichText } from 'biibaos'

export default function App() {
  return (
    <RichText 
      label="Short Bio"
      maxLength={100}
      actions={['bold', 'italic', 'emoji']}
    />
  )
}

Custom Actions

Configure exactly which tools are available to the user.

Simple Comment

'use client'

import React from 'react'
import { RichText } from 'biibaos'

export default function App() {
  return (
    <RichText 
      label="Description"
      placeholder="Type something here..."
      maxLength={500}
      onChange={(content) => console.log(content)}
    />
  )
}

Properties

Prop	Type	Default	Description
`label`	`string`	—	Primary text label
`defaultValue`	`string`	""	Initial HTML text content
`placeholder`	`string`	"Type something..."	Ghost placeholder text displayed inside empty editor
`onChange`	`(value: string) => void`	—	Callback triggered on text input
`actions`	`('bold' \| 'italic' \| 'underline' \| 'link' \| 'heading' \| 'list' \| 'emoji')[]`	['bold', 'italic', 'heading', 'list', 'emoji']	Enabled formatting tools
`maxLength`	`number`	—	Maximum character limit constraint
`error`	`string`	—	Validation error text message
`hint`	`string`	—	Supporting instructional helper text
`disabled`	`boolean`	false	Disable content editing and actions
`required`	`boolean`	false	Renders an asterisk indicating required form field

OTP Input

Text