Forms

Form components for collecting user input.

Input

Text input with label, error, and hint support.

Usage

tsx

import { Input } from "fromsrc/client";

<Input label="email" placeholder="you@example.com" />;

Sizes

With error

usernameusername is required

With hint

passwordmust be 8+ characters

API key

Props

prop	type	default	description
variant	"default" \| "error"	"default"	Visual style
size	"sm" \| "md" \| "lg"	"md"	Input size
label	ReactNode	-	Accessible label
error	ReactNode	-	Error message
hint	ReactNode	-	Helper text
tooltip	ReactNode	-	Help text shown on hover

Button

Interactive button with loading state.

Usage

tsx

import { Button } from "fromsrc/client";

<Button variant="primary">submit</Button>;

Variants

Sizes

Loading

Props

prop	type	default	description
variant	"default" \| "primary" \| "ghost" \| "danger"	"default"	Visual style
size	"sm" \| "md" \| "lg"	"md"	Button size
loading	boolean	false	Show loading spinner

Select

Dropdown select with keyboard navigation.

Usage

tsx

import { Select } from "fromsrc/client";

<Select
  options={[
    { value: "react", label: "react" },
    { value: "vue", label: "vue" },
    { value: "svelte", label: "svelte" },
  ]}
  placeholder="choose framework"
/>;

With label

framework

With error

country

selection required

Disabled options

region

Props

prop	type	default	description
options	SelectOption[]	required	List of options
value	string	-	Controlled value
defaultValue	string	""	Uncontrolled default
onChange	(value: string) => void	-	Change callback
placeholder	string	"select..."	Placeholder text
disabled	boolean	false	Disable select
error	ReactNode	-	Error message
label	ReactNode	-	Accessible label
tooltip	ReactNode	-	Help text shown on hover

SelectOption

prop	type	default	description
value	string	required	Option value
label	string	required	Display text
disabled	boolean	false	Disable option

Checkbox

Checkbox input with label and indeterminate state.

Usage

tsx

import { Checkbox } from "fromsrc/client";

<Checkbox label="accept terms" />;

accept terms

Sizes

small checkbox

medium checkbox

large checkbox

With error

required fieldyou must accept

Indeterminate

select all

enable analytics

Props

prop	type	default	description
label	ReactNode	-	Accessible label
size	"sm" \| "md" \| "lg"	"md"	Checkbox size
indeterminate	boolean	false	Show indeterminate state
error	ReactNode	-	Error message
tooltip	ReactNode	-	Help text shown on hover

Switch

Toggle switch for boolean values.

Usage

tsx

import { Switch } from "fromsrc/client";
import { useState } from "react";

function Example() {
  const [on, setOn] = useState(false);
  return <Switch label="notifications" checked={on} onChange={setOn} />;
}

notifications

Sizes

small

medium

large

Disabled

disabled switch

dark mode

Props

prop	type	default	description
checked	boolean	false	Whether switch is on
onChange	(checked: boolean) => void	-	Toggle callback
size	"sm" \| "md" \| "lg"	"md"	Switch size
label	string	-	Accessible label
disabled	boolean	false	Disable switch
tooltip	ReactNode	-	Help text shown on hover

Autofill

Search input with autocomplete suggestions.

Usage

tsx

import { Autofill } from "fromsrc/client";

<Autofill
  items={[
    { id: "1", label: "javascript" },
    { id: "2", label: "typescript" },
    { id: "3", label: "python" },
  ]}
  placeholder="search languages"
/>;

With selection callback

tsx

<Autofill items={items} onSelect={(item) => console.log("selected:", item)} />

Features

Filters as you type
Keyboard navigation with arrow keys
Enter to select highlighted item
Escape to close suggestions
Closes on outside click

Props

prop	type	default	description
items	AutofillItem[]	required	List of suggestions
placeholder	string	"search..."	Placeholder text
value	string	-	Controlled value
onChange	(value: string) => void	-	Input change callback
onSelect	(item: AutofillItem) => void	-	Selection callback

AutofillItem

prop	type	default	description
id	string	required	Unique identifier
label	string	required	Display text
value	string	-	Value when selected (defaults to label)

Radio

Radio button group for selecting one option from a set.

Usage

tsx

import { Radio, RadioGroup } from "fromsrc/client";

<RadioGroup label="plan">
  <Radio value="free" label="free" />
  <Radio value="pro" label="pro" />
  <Radio value="team" label="team" />
</RadioGroup>;

free

pro

team

Sizes

option a

option b

option a

option b

option a

option b

Horizontal

light

dark

system

Disabled

option a

option b

RadioGroup props

prop	type	default	description
value	string	-	Controlled value
defaultValue	string	-	Uncontrolled default
onChange	(value: string) => void	-	Change callback
name	string	-	Form field name
size	"sm" \| "md" \| "lg"	"md"	Radio size
label	string	-	Group label for accessibility
orientation	"horizontal" \| "vertical"	"vertical"	Layout direction
disabled	boolean	false	Disable all radios

Radio props

prop	type	default	description
value	string	required	Unique value for this option
label	ReactNode	-	Accessible label
disabled	boolean	false	Disable this radio

Textarea

Multi-line text input with autoresize and character count.

Usage

tsx

import { Textarea } from "fromsrc/client";

<Textarea label="message" placeholder="type here..." />;

message

Sizes

With error

bio

bio is required

With hint

description

keep it brief

Character count

0/280

Autoresize

notes

feedback

Props

prop	type	default	description
variant	"default" \| "error"	"default"	Visual style
size	"sm" \| "md" \| "lg"	"md"	Textarea size
label	ReactNode	-	Accessible label
error	ReactNode	-	Error message
hint	ReactNode	-	Helper text
autoresize	boolean	false	Auto-resize based on content
maxLength	number	-	Maximum character count
showCount	boolean	false	Show character count
tooltip	ReactNode	-	Help text shown on hover

Form components for collecting user input.

Input

Text input with label, error, and hint support.

Usage

tsx

import { Input } from "fromsrc/client";

<Input label="email" placeholder="you@example.com" />;

Sizes

With error

usernameusername is required

With hint

passwordmust be 8+ characters

API key

Props

prop	type	default	description
variant	"default" \| "error"	"default"	Visual style
size	"sm" \| "md" \| "lg"	"md"	Input size
label	ReactNode	-	Accessible label
error	ReactNode	-	Error message
hint	ReactNode	-	Helper text
tooltip	ReactNode	-	Help text shown on hover

Button

Interactive button with loading state.

Usage

tsx

import { Button } from "fromsrc/client";

<Button variant="primary">submit</Button>;

Variants

Sizes

Loading

Props

prop	type	default	description
variant	"default" \| "primary" \| "ghost" \| "danger"	"default"	Visual style
size	"sm" \| "md" \| "lg"	"md"	Button size
loading	boolean	false	Show loading spinner

Select

Dropdown select with keyboard navigation.

Usage

tsx

import { Select } from "fromsrc/client";

<Select
  options={[
    { value: "react", label: "react" },
    { value: "vue", label: "vue" },
    { value: "svelte", label: "svelte" },
  ]}
  placeholder="choose framework"
/>;

With label

framework

With error

country

selection required

Disabled options

region

Props

prop	type	default	description
options	SelectOption[]	required	List of options
value	string	-	Controlled value
defaultValue	string	""	Uncontrolled default
onChange	(value: string) => void	-	Change callback
placeholder	string	"select..."	Placeholder text
disabled	boolean	false	Disable select
error	ReactNode	-	Error message
label	ReactNode	-	Accessible label
tooltip	ReactNode	-	Help text shown on hover

SelectOption

prop	type	default	description
value	string	required	Option value
label	string	required	Display text
disabled	boolean	false	Disable option

Checkbox

Checkbox input with label and indeterminate state.

Usage

tsx

import { Checkbox } from "fromsrc/client";

<Checkbox label="accept terms" />;

accept terms

Sizes

small checkbox

medium checkbox

large checkbox

With error

required fieldyou must accept

Indeterminate

select all

enable analytics

Props

prop	type	default	description
label	ReactNode	-	Accessible label
size	"sm" \| "md" \| "lg"	"md"	Checkbox size
indeterminate	boolean	false	Show indeterminate state
error	ReactNode	-	Error message
tooltip	ReactNode	-	Help text shown on hover

Switch

Toggle switch for boolean values.

Usage

tsx

import { Switch } from "fromsrc/client";
import { useState } from "react";

function Example() {
  const [on, setOn] = useState(false);
  return <Switch label="notifications" checked={on} onChange={setOn} />;
}

notifications

Sizes

small

medium

large

Disabled

disabled switch

dark mode

Props

prop	type	default	description
checked	boolean	false	Whether switch is on
onChange	(checked: boolean) => void	-	Toggle callback
size	"sm" \| "md" \| "lg"	"md"	Switch size
label	string	-	Accessible label
disabled	boolean	false	Disable switch
tooltip	ReactNode	-	Help text shown on hover

Autofill

Search input with autocomplete suggestions.

Usage

tsx

import { Autofill } from "fromsrc/client";

<Autofill
  items={[
    { id: "1", label: "javascript" },
    { id: "2", label: "typescript" },
    { id: "3", label: "python" },
  ]}
  placeholder="search languages"
/>;

With selection callback

tsx

<Autofill items={items} onSelect={(item) => console.log("selected:", item)} />

Features

Filters as you type
Keyboard navigation with arrow keys
Enter to select highlighted item
Escape to close suggestions
Closes on outside click

Props

prop	type	default	description
items	AutofillItem[]	required	List of suggestions
placeholder	string	"search..."	Placeholder text
value	string	-	Controlled value
onChange	(value: string) => void	-	Input change callback
onSelect	(item: AutofillItem) => void	-	Selection callback

AutofillItem

prop	type	default	description
id	string	required	Unique identifier
label	string	required	Display text
value	string	-	Value when selected (defaults to label)

Radio

Radio button group for selecting one option from a set.

Usage

tsx

import { Radio, RadioGroup } from "fromsrc/client";

<RadioGroup label="plan">
  <Radio value="free" label="free" />
  <Radio value="pro" label="pro" />
  <Radio value="team" label="team" />
</RadioGroup>;

free

pro

team

Sizes

option a

option b

option a

option b

option a

option b

Horizontal

light

dark

system

Disabled

option a

option b

RadioGroup props

prop	type	default	description
value	string	-	Controlled value
defaultValue	string	-	Uncontrolled default
onChange	(value: string) => void	-	Change callback
name	string	-	Form field name
size	"sm" \| "md" \| "lg"	"md"	Radio size
label	string	-	Group label for accessibility
orientation	"horizontal" \| "vertical"	"vertical"	Layout direction
disabled	boolean	false	Disable all radios

Radio props

prop	type	default	description
value	string	required	Unique value for this option
label	ReactNode	-	Accessible label
disabled	boolean	false	Disable this radio

Textarea

Multi-line text input with autoresize and character count.

Usage

tsx

import { Textarea } from "fromsrc/client";

<Textarea label="message" placeholder="type here..." />;

message

Sizes

With error

bio

bio is required

With hint

description

keep it brief

Character count

0/280

Autoresize

notes

feedback

Props

prop	type	default	description
variant	"default" \| "error"	"default"	Visual style
size	"sm" \| "md" \| "lg"	"md"	Textarea size
label	ReactNode	-	Accessible label
error	ReactNode	-	Error message
hint	ReactNode	-	Helper text
autoresize	boolean	false	Auto-resize based on content
maxLength	number	-	Maximum character count
showCount	boolean	false	Show character count
tooltip	ReactNode	-	Help text shown on hover