Forms

Input

Text input with label, hint, icon slots, sizes, error / success states.

Basic Usage

Text inputs are the most common way to collect user data.

'use client'

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

export default function App() {
  return (
    <div style={{ maxWidth: 400 }}>
      <Input label="Full Name" placeholder="John Doe" />
    </div>
  )
}

States

Error, success, hint and disabled states.

Username is available

Check your email for a code

'use client'

import React from 'react'
import { Input, Stack } from 'biibaos'

export default function App() {
  return (
    <Stack direction="column" gap={12} style={{ maxWidth: 400 }}>
      <Input label="Email" error="Please enter a valid email" />
      <Input label="Username" success="Username is available" />
      <Input label="Promo code" hint="Check your email for a code" />
      <Input label="Locked field" disabled value="readonly" onChange={() => {}} />
    </Stack>
  )
}

Icons & Addons

Attach icons to either edge of the input.

'use client'

import React from 'react'
import { Input, Icon, Stack } from 'biibaos'
import { Search, Settings } from 'lucide-react'

export default function App() {
  return (
    <Stack direction="column" gap={12} style={{ maxWidth: 400 }}>
      <Input
        label="Search"
        leftIcon={<Icon icon={Search} size={16} />}
        placeholder="Find something…"
      />
      <Input
        label="Password"
        type="password"
        rightIcon={<Icon icon={Settings} size={16} />}
        placeholder="••••••••"
      />
    </Stack>
  )
}

Prefix & Suffix

Attach static text labels to the edge of an input — useful for units or URLs.

https://
.com
$
USD
'use client'

import React from 'react'
import { Input, Stack } from 'biibaos'

export default function App() {
  return (
    <Stack direction="column" gap={12} style={{ maxWidth: 400 }}>
      <Input label="Website" prefix="https://" suffix=".com" placeholder="yourdomain" />
      <Input label="Amount" prefix="$" suffix="USD" placeholder="0.00" type="number" />
    </Stack>
  )
}

Clearable & Character Count

Allow users to one-click clear the field. Add a character counter with showCount.

0/100
'use client'

import React from 'react'
import { Input, Stack, Icon } from 'biibaos'
import { Search } from 'lucide-react'

export default function App() {
  return (
    <Stack direction="column" gap={12} style={{ maxWidth: 400 }}>
      <Input label="Bio" clearable showCount maxLength={100} placeholder="Tell us about yourself…" />
      <Input label="Search" clearable leftIcon={<Icon icon={Search} size={16} />} placeholder="Search…" />
    </Stack>
  )
}

Real-world Scenario: Live Search

Combining state, loading indicators, and card results for a smooth search experience.

'use client'

import { Input, Stack, Icon, Card, Avatar, Text, View } from 'biibaos'
import { Search } from 'lucide-react'
import { useState } from 'react'

export default function SearchFilter() {
  const [query, setQuery] = useState('')
  const [loading, setLoading] = useState(false)

  const handleSearch = (e) => {
    const val = e.target.value
    setQuery(val)
    
    if (val) {
      setLoading(true)
      setTimeout(() => setLoading(false), 800)
    }
  }

  return (
    <Stack direction="column" gap={16}>
      <Input
        label="Team Search"
        placeholder="Search members..."
        leftIcon={<Icon icon={Search} size={16} />}
        value={query}
        onChange={handleSearch}
        loading={loading}
        clearable
      />
      
      {query && !loading && (
        <Card variant="outlined" style={{ padding: 12 }}>
          <Stack direction="row" align="center" gap={12}>
            <Avatar size="sm" initials={query.slice(0, 2).toUpperCase()} />
            <View>
              <Text weight="bold" size={14}>{query}</Text>
              <Text size={12} color="muted">Matching Member</Text>
            </View>
          </Stack>
        </Card>
      )}
    </Stack>
  )
}

Properties

PropTypeDefaultDescription
labelstring—Floating label above the input
hintstring—Helper text shown below
errorstring—Error message — sets error styling
successstring—Success message — sets success styling
sizeBiibaSize'md'Input height scale
leftIconReact.ReactNode—Icon/element rendered inside the left edge
rightIconReact.ReactNode—Icon/element rendered inside the right edge
onRightIconClick() => void—Clickable right icon callback
rightActionReact.ReactNode—Action button rendered at the far right (outside input) e.g. "Search"
prefixReact.ReactNode—Inline prefix text e.g. "https://"
suffixReact.ReactNode—Inline suffix text e.g. ".com"
requiredboolean—Marks field as required and adds asterisk to label
loadingboolean—Show a spinning loader inside the input
clearableboolean—Show a clear (×) button when input has a value
showCountboolean—Show a character counter — set maxLength on the input to cap
labelSrOnlyboolean—Visually hide the label (still present for a11y)

Previous

Button Group

Next

Textarea