Components
- AccordionNew
- Alert
- Alert DialogNew
- AutocompleteNew
- AvatarNew
- Badge
- Breadcrumb
- Button
- CalendarNew
- CardNew
- Checkbox
- Checkbox GroupNew
- CollapsibleNew
- ComboboxNew
- CommandNew
- Context MenuNew
- Date PickerNew
- DialogNew
- DrawerNew
- EmptyNew
- FieldNew
- FieldsetNew
- FormNew
- FrameNew
- GroupNew
- Input
- Input GroupNew
- KbdNew
- Label
- MenuNew
- MeterNew
- Number Field
- OTP FieldNew
- Pagination
- PopoverNew
- Preview CardNew
- Progress
- Radio Group
- Scroll AreaNew
- Select
- Separator
- SheetNew
- SkeletonNew
- Slider
- Spinner
- StepperNew
- Switch
- Table
- TabsNew
- Textarea
- ToastNew
- ToggleNew
- Toggle GroupNew
- ToolbarNew
- Tooltip
Fieldset
A native fieldset element with a legend.
import { Field, FieldDescription, FieldLabel } from "mako-ui/components/field";
import { Fieldset, FieldsetLegend } from "mako-ui/components/fieldset";
import { Input } from "mako-ui/components/input";
export default function Particle() {
return (
<Fieldset className="flex w-full flex-col gap-6">
<FieldsetLegend>Billing Details</FieldsetLegend>
<Field>
<FieldLabel>Company</FieldLabel>
<Input placeholder="Enter company name" type="text" />
<FieldDescription>
The name that will appear on invoices.
</FieldDescription>
</Field>
<Field>
<FieldLabel>Tax ID</FieldLabel>
<Input placeholder="Enter tax identification number" type="text" />
<FieldDescription>
Your business tax identification number.
</FieldDescription>
</Field>
</Fieldset>
);
}
Usage
import { Fieldset, FieldsetLegend } from "mako-ui/components/fieldset"<Fieldset>
<FieldsetLegend>Fieldset legend</FieldsetLegend>
</Fieldset>API Reference
Fieldset
Root component. Includes flex column layout.
FieldsetLegend
Legend for the fieldset. Includes semibold font weight.
On This Page