Input

Basic button compoment

Installing

Install the component

npm install @supabase/ui

Getting started

Import the component

@import { Input } from '@supabase/ui'

Basic

An Input component will default to using type="text". You can define a label.

1import { Input } from "@supabase/ui";
2
3export default function InputBasic() {
4  return <Input label="First name" />;
5}
6

Input labels

You can define the type of a button using the type prop.

There are primary, default, secondary, outline, dashed, and text.

Optional input

Description of input

1import { Input } from "@supabase/ui";
2
3export default function InputBasic() {
4  return (
5    <Input
6      label="First name"
7      descriptionText="Description of input"
8      labelOptional="Optional input"
9    />
10  );
11}
12

Icon

use Icon to inject any Icon component you like.

1import { IconMail, Input } from "@supabase/ui";
2
3export default function InputBasic() {
4  return (
5    <Input
6      label="Email"
7      placeholder="john@digweed.com"
8      icon={<IconMail />}
9      type="email"
10    />
11  );
12}
13

Copy value

Use copy to add a copy button. It will copy the value of value

1import { Input } from "@supabase/ui";
2
3export default function InputBasic() {
4  return <Input label="First name" value="John digwood" copy />;
5}
6

Reveal and copy

Use copy to add a copy button. It will copy the value of value

1import { Input } from "@supabase/ui";
2
3export default function InputBasic() {
4  return <Input label="First name" value="I'm a hidden name" reveal copy />;
5}
6

Actions

Use actions to inject any React.ReactNode jsx

1import { Button, IconActivity, Input } from "@supabase/ui";
2
3export default function InputBasic() {
4  return (
5    <Input
6      label="First name"
7      actions={[
8        <Button type="dashed" icon={<IconActivity />}>
9          Check status
10        </Button>,
11        <Button danger>Remove</Button>,
12      ]}
13    />
14  );
15}
16

Error

Use error with a string to show an error message

This is the error message

1import { Input } from "@supabase/ui";
2
3export default function InputError() {
4  return <Input label="First name" error="This is the error message" />;
5}
6

Text Area

Use <Input.TextArea> to use a text area input

1import { Input } from "@supabase/ui";
2
3export default function InputBasic() {
4  return <Input.TextArea label="Text area" />;
5}
6

Text Area with limit

Use <Input.TextArea> to use a text area input

500 character limit
0/500
1import { Input } from "@supabase/ui";
2
3export default function InputTextAreaWithLimit() {
4  return (
5    <Input.TextArea
6      label="Text area"
7      limit={500}
8      rows={8}
9      type="text"
10      labelOptional="500 character limit"
11    />
12  );
13}
14

API reference

SyntaxDescription
HeaderTitle
ParagraphText