new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

shadcn/ui · Components · all subjects

input-group/usage

9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Custom input focus state handling

To add automatic focus state handling to custom inputs, add the data-slot="input-group-control" attribute to your custom input element.

Input Group import statement

Import the Input Group components using: import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "@/components/ui/input-group"

Input Group basic usage example

Basic Input Group example with search icon addon: ```tsx <InputGroup> <InputGroupInput placeholder="Search..." /> <InputGroupAddon> <SearchIcon /> </InputGroupAddon> </InputGroup> ```

Custom input data attribute for input groups

Add the data-slot="input-group-control" attribute to custom input elements for automatic focus state handling in input groups.

InputGroupButton example

Examples of InputGroupButton usage: ```tsx <InputGroupButton>Button</InputGroupButton> <InputGroupButton size="icon-xs" aria-label="Copy"> <CopyIcon /> </InputGroupButton> ```

InputGroupInput example

Example of InputGroupInput usage: ```tsx <InputGroup> <InputGroupInput placeholder="Enter text..." /> <InputGroupAddon> <SearchIcon /> </InputGroupAddon> </InputGroup> ```

InputGroupTextarea example

Example of InputGroupTextarea usage: ```tsx <InputGroup> <InputGroupTextarea placeholder="Enter message..." /> <InputGroupAddon align="block-end"> <InputGroupButton>Send</InputGroupButton> </InputGroupAddon> </InputGroup> ```

Input Group alignment guidance for input vs textarea

For InputGroupInput, use inline-start or inline-end alignment. For InputGroupTextarea, use block-start or block-end alignment.

InputGroupAddon with multiple buttons

InputGroupAddon can contain multiple InputGroupButton components: ```tsx <InputGroupAddon> <InputGroupButton>Button</InputGroupButton> <InputGroupButton>Button</InputGroupButton> </InputGroupAddon> ```

Give your agent this brain