Focus Input for the wrapper?

[alekseykurylev]

Hi! How can I add a focus state to the wrapper of the Input react-aria-components?

function MyTextField(
  { label, description, errorMessage, ...props }
) {
  return (
    <TextField {...props}>
      <Label>{label}</Label>

      <div className="wrapper" data-focused='?????' data-focus-visible='????'>
          <Input />
      </div>

      {description && <Text slot="description">{description}</Text>}
      <FieldError>{errorMessage}</FieldError>
    </TextField>
  );
}

[snowystinger]

You can use the data attributes already on the TextField, no need to add new ones. Then you can just target elements inside like usual.

You can check out these sections in the docs for more info https://react-spectrum.adobe.com/react-aria/styling.html#states and https://react-spectrum.adobe.com/react-aria/TextField.html#styling

You can also check out the css for any of the examples just below the example.

[alekseykurylev]

You can use the data attributes already on the TextField, no need to add new ones. Then you can just target elements inside like usual.

How can I add a data-focused for the TextField component?

[yihuiliao]

So [data-focused] is already built into the TextField component so there is no need to add it. If you want to make use of it, you can do something like .react-aria-Textfield [data-focused] in your css file to style the Textfield component when it’s being focused.

Input also has this data attribute so if you want to target the Input component, you can do something very similar like .react-aria-Input[data-focused] in your css file to target it when it’s being focused. Again, no need to add these data attributes yourself since they are already built in. You can refer to the links above to see what data attributes exist on each component and how to use them.

[snowystinger]

Be careful applying it to the react-aria-Input though, it will apply to every one on the page, not just the TextField.

[mehdibha]

There's no focus data attributes in the TextField component, they're only applied on the Input component, How do you recommend implementing this?

https://github.com/adobe/react-spectrum/blob/main/packages/react-aria-components/src/TextField.tsx

return (
    <div
      {...DOMProps}
      {...renderProps}
      ref={ref}
      slot={props.slot || undefined}
      data-disabled={props.isDisabled || undefined}
      data-invalid={validation.isInvalid || undefined}
      data-readonly={props.isReadOnly || undefined}
      data-required={props.isRequired || undefined}>
      <Provider
        values={[
          [LabelContext, {...labelProps, ref: labelRef}],
          [InputContext, {...inputProps, ref: inputOrTextAreaRef}],
          [TextAreaContext, {...inputProps, ref: inputOrTextAreaRef}],
          [TextContext, {
            slots: {
              description: descriptionProps,
              errorMessage: errorMessageProps
            }
          }],
          [FieldErrorContext, validation]
        ]}>
        {renderProps.children}
      </Provider>
    </div>
  );
```

[snowystinger]

Looks like there was a typo in the previous response, I've corrected it. The data attribute is applied on the Input element. You can target it with the [space] descendant selector or whatever combination of selectors makes sense for you. You can see our CSS here https://react-spectrum.adobe.com/react-aria/TextField.html#textfield if you expand the Show CSS section just under the first example.

You can also view any of our starter templates or examples for more ideas.
https://react-spectrum.adobe.com/react-aria/examples/index.html
https://react-spectrum.adobe.com/react-aria/TextField.html#starter-kits