{"name":"label","title":"Label","description":"Renders an accessible label associated with a control.","installCommand":"bunx marko-ui add label -y","usageTags":"<Label>","importSnippet":"import Label from \"@/components/ui/label/label.marko\";","usageSnippet":"<Label for=\"email\">Your email address</Label>","tags":["Label"],"parts":[],"props":[],"events":[],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"label-demo","title":"Basic","source":"import Checkbox from \"@marko-ui/shadcn/ui/checkbox/checkbox.marko\";\n\n<Checkbox id=\"terms\">\n  <span>Accept terms and conditions</span>\n</Checkbox>","description":"A label paired with a checkbox via the shared id."},{"id":"label-input-with-label","title":"With input","source":"import TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\nimport Label from \"@marko-ui/shadcn/ui/label/label.marko\";\n\n<div class=\"grid w-full max-w-sm items-center gap-3\">\n  <Label for=\"email\">Email</Label>\n  <TextInput type=\"email\" id=\"email\" placeholder=\"Email\"/>\n</div>","description":"A label stacked above an input, associated by `for`/`id`."},{"id":"label-required","title":"Required field","source":"import TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\nimport Label from \"@marko-ui/shadcn/ui/label/label.marko\";\n\n<div class=\"grid w-full max-w-sm items-center gap-3\">\n  <Label for=\"username\">\n    Username <span class=\"text-destructive\">*</span>\n  </Label>\n  <TextInput id=\"username\" type=\"text\" placeholder=\"jdoe\"/>\n</div>","description":"Compose arbitrary markup, such as a required-field marker, inside the label."},{"id":"label-disabled","title":"Disabled","source":"import Label from \"@marko-ui/shadcn/ui/label/label.marko\";\n\n<div class=\"group flex items-center gap-2\" data-disabled=\"true\">\n  <input id=\"disabled-terms\" type=\"checkbox\" disabled class=\"peer\"/>\n  <Label for=\"disabled-terms\">Accept terms and conditions</Label>\n</div>","description":"Label styles react to a disabled peer or an ancestor with `data-disabled=\"true\"`, dimming the text and blocking pointer events."},{"id":"label-in-field","title":"Label in Field","source":"import Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Checkbox from \"@marko-ui/shadcn/ui/checkbox/checkbox.marko\";\nimport Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldDescription from \"@marko-ui/shadcn/ui/field/field-description.marko\";\nimport FieldGroup from \"@marko-ui/shadcn/ui/field/field-group.marko\";\nimport FieldLabel from \"@marko-ui/shadcn/ui/field/field-label.marko\";\nimport FieldLegend from \"@marko-ui/shadcn/ui/field/field-legend.marko\";\nimport FieldSeparator from \"@marko-ui/shadcn/ui/field/field-separator.marko\";\nimport FieldSet from \"@marko-ui/shadcn/ui/field/field-set.marko\";\nimport TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\nimport Select from \"@marko-ui/shadcn/ui/select/select.marko\";\nimport Textarea from \"@marko-ui/shadcn/ui/textarea/textarea.marko\";\n\nstatic const months = [\n  { value: \"01\", label: \"01\" },\n  { value: \"02\", label: \"02\" },\n  { value: \"03\", label: \"03\" },\n  { value: \"04\", label: \"04\" },\n  { value: \"05\", label: \"05\" },\n  { value: \"06\", label: \"06\" },\n  { value: \"07\", label: \"07\" },\n  { value: \"08\", label: \"08\" },\n  { value: \"09\", label: \"09\" },\n  { value: \"10\", label: \"10\" },\n  { value: \"11\", label: \"11\" },\n  { value: \"12\", label: \"12\" },\n];\n\nstatic const years = [\n  { value: \"2024\", label: \"2024\" },\n  { value: \"2025\", label: \"2025\" },\n  { value: \"2026\", label: \"2026\" },\n  { value: \"2027\", label: \"2027\" },\n  { value: \"2028\", label: \"2028\" },\n  { value: \"2029\", label: \"2029\" },\n];\n\n<div class=\"w-full max-w-md\">\n  <form>\n    <FieldGroup>\n      <FieldSet>\n        <FieldLegend>Payment Method</FieldLegend>\n        <FieldDescription>All transactions are secure and encrypted</FieldDescription>\n        <FieldGroup>\n          <Field>\n            <FieldLabel for=\"label-field-card-name\">Name on Card</FieldLabel>\n            <TextInput id=\"label-field-card-name\" placeholder=\"Evil Rabbit\" required/>\n          </Field>\n          <Field>\n            <FieldLabel for=\"label-field-card-number\">Card Number</FieldLabel>\n            <TextInput id=\"label-field-card-number\" placeholder=\"1234 5678 9012 3456\" required/>\n            <FieldDescription>Enter your 16-digit card number</FieldDescription>\n          </Field>\n          <div class=\"grid grid-cols-3 gap-4\">\n            <Field>\n              <Select items=months label=\"Month\" placeholder=\"MM\"/>\n            </Field>\n            <Field>\n              <Select items=years label=\"Year\" placeholder=\"YYYY\"/>\n            </Field>\n            <Field>\n              <FieldLabel for=\"label-field-cvv\">CVV</FieldLabel>\n              <TextInput id=\"label-field-cvv\" placeholder=\"123\" required/>\n            </Field>\n          </div>\n        </FieldGroup>\n      </FieldSet>\n      <FieldSeparator/>\n      <FieldSet>\n        <FieldLegend>Billing Address</FieldLegend>\n        <FieldDescription>The billing address associated with your payment method</FieldDescription>\n        <FieldGroup>\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"label-field-same-as-shipping\" defaultChecked class=\"font-normal\">\n              Same as shipping address\n            </Checkbox>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n      <FieldSet>\n        <FieldLegend class=\"sr-only\">Additional Comments</FieldLegend>\n        <FieldGroup>\n          <Field>\n            <FieldLabel for=\"label-field-comments\">Comments</FieldLabel>\n            <Textarea id=\"label-field-comments\" placeholder=\"Add any additional comments\" class=\"resize-none\"/>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n      <Field orientation=\"horizontal\">\n        <Button type=\"submit\">Submit</Button>\n        <Button variant=\"outline\" type=\"button\">Cancel</Button>\n      </Field>\n    </FieldGroup>\n  </form>\n</div>","description":"For form fields, use the `Field` component, which includes built-in `FieldLabel`, `FieldDescription`, and `FieldError` parts.","essential":true},{"id":"field-demo","title":"Field","source":"import Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldLabel from \"@marko-ui/shadcn/ui/field/field-label.marko\";\nimport FieldDescription from \"@marko-ui/shadcn/ui/field/field-description.marko\";\nimport TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\n\n<Field class=\"max-w-sm\">\n  <FieldLabel for=\"field-default-email\">Email</FieldLabel>\n  <TextInput id=\"field-default-email\" type=\"email\" placeholder=\"you@example.com\"/>\n  <FieldDescription>We'll never share your email.</FieldDescription>\n</Field>","description":"The same `Field`/`FieldLabel`/`FieldDescription` composition shown on the Field page — reach for it whenever a label needs to sit inside a full form field."},{"id":"label-rtl","title":"RTL","source":"import Checkbox from \"@marko-ui/shadcn/ui/checkbox/checkbox.marko\";\n\n<div dir=\"rtl\" class=\"flex gap-2\">\n  <Checkbox id=\"terms-rtl\">قبول الشروط والأحكام</Checkbox>\n</div>","description":"Label restyles correctly under a `dir=\"rtl\"` ancestor — no component changes needed."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"label"}