ColidyUI

Installation

npx @colidy/ui i textfield

API Reference

Prop	Type	Default
label*	string	null
description	string	null
size	smmdlg	null
left	React.ReactNodestring	null
right	React.ReactNodestring	null

Examples

Basic usage

Basic usage of the `Label` component.

example.tsx

import { TextField } from "@/colidy-ui/TextField";

export default function BasicUsage() {
    return (
        <div className="max-w-lg">
                <TextField />
            </div>
    );
}

With label

Basic usage of the `TextField` component with label.

Full Name

example.tsx

import { TextField } from "@/colidy-ui/TextField";

export default function WithLabel() {
    return (
        <div className="max-w-lg">
                <TextField label="Full Name" />
            </div>
    );
}

With description

Basic usage of the `TextField` component with description.

Full Name

Your full name.

example.tsx

import { TextField } from "@/colidy-ui/TextField";

export default function WithDescription() {
    return (
        <div className="max-w-lg">
                <TextField
                    label="Full Name"
                    description="Your full name."
                />
            </div>
    );
}

With left content

Basic usage of the `TextField` component with left content.

Budget$

example.tsx

import { TextField } from "@/colidy-ui/TextField";

export default function WithLeftContent() {
    return (
        <div className="max-w-lg">
                <TextField label="Budget" left="$" />
            </div>
    );
}

With right content

Basic usage of the `TextField` component with right content.

BudgetUSD

example.tsx

import { TextField } from "@/colidy-ui/TextField";

export default function WithRightContent() {
    return (
        <div className="max-w-lg">
                <TextField label="Budget" right="USD" />
            </div>
    );
}