import {BaseTextField} from "@qinetik/anique/textfield";
export default function BasicTextFieldExample() {
return (
<BaseTextField
placeholder={"Username"}
/>
)
}
TextField
Basic Text Field
Text Area
import {TextArea} from "@qinetik/anique/textfield";
export default function BasicTextAreaExample() {
return (
<TextArea
placeholder={"Note here"}
/>
)
}
Disabled
import {BaseTextField, TextArea} from "@qinetik/anique/textfield";
import {Column} from "@qinetik/anique/column";
export default function DisabledFieldAreaExample() {
return (
<Column gap={"0.5em"}>
<BaseTextField
placeholder={"Username"}
value={"Something i wrote here"}
disabled
/>
<TextArea
placeholder={"Note here"}
disabled
>Something I wrote here</TextArea>
</Column>
)
}
Labeled Text Field
Username
import {Icon} from "@qinetik/anique";
import {InformationBoxOutline} from "@qinetik/anique-icons";
import {IconButton} from "@qinetik/anique/icon-button";
import Menu from "../../../../solid/icons/Menu";
import {TextField} from "@qinetik/anique/textfield";
export default function TextFieldFullIconsExample() {
return (
<TextField
leadingIcon={
<Icon>
<InformationBoxOutline/>
</Icon>
}
trailingIcon={
<IconButton>
<Menu/>
</IconButton>
}
label={"Username"}
placeholder={"Type Here"}
/>
)
}
Other TextField Usages
Without Label & Icons
Without Icons
Username
With Leading Icon
Username
With Trailing Icon
Username
With Leading & Trailing Icons
Styled
Username
Disabled
Username
With Normal Sized Icons
Username